CSS Vue 切换背景颜色

短命女 2022-01-30 06:41 310阅读 0赞

原文演示及链接： [https://codepen.io/richardtallent/pen/yvpERW/][https_codepen.io_richardtallent_pen_yvpERW]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70 1][]

<template>
        <div class="theme" :style="bgProps">
            <div class="btn">
                <input type="color" v-model="changeColor">
            </div>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                changeColor: '#00cc00'
            }
        },
        computed: {
            bgProps() {
               return {
                   '--bg-color': this.changeColor
               }
            }
        },
    }
    </script>
    <style lang="scss" scoped>
    .theme{
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-color);
        .btn > input{
            width: 30px;
            height: 30px;
        }
    }
    </style>

[https_codepen.io_richardtallent_pen_yvpERW]: https://codepen.io/richardtallent/pen/yvpERW/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70]: /images/20220130/c57d0093f6874104bbe006f67e145e14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70 1]: /images/20220130/eba68e982557490395bbae65ac50ec11.png

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 进入组件设置背景颜色退出组件还原背景颜色

进入组件更改背景颜色 beforeCreate—创建之前调用 beforeCreate() { document.querySelector

r囧r小猫/ 2022年12月13日 01:39/ 0 赞/ 214 阅读

相关 Vue动态切换背景图

最近在改写一个网站，抽离公共组件的时候，发现一个nav组件图标是用background-image显示的。把基本的框架抽离出去，具体菜单项用插槽，然后图片需要用props传参。

小灰灰/ 2022年09月11日 03:14/ 0 赞/ 197 阅读

相关 js svg开关切换背景颜色

[下载地址][Link 1]js svg开关切换背景颜色，附带爱心放大动画特效。 ![1630057198.png][] dd: [Link 1]: https:

傷城~/ 2022年09月09日 06:02/ 0 赞/ 183 阅读

相关 vue背景渐变切换动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

短命女/ 2022年05月21日 01:55/ 0 赞/ 311 阅读

相关 CSS颜色和背景属性

一介绍 1、backgroundColor属性 backgroundColor属性用于设置或检索对象的背景颜色。其对应的样式标签属性为background-color属性

￡神魔★判官ぃ/ 2022年05月12日 00:16/ 0 赞/ 340 阅读

相关 javascript点击切换背景颜色和背景大小

css <style> .box{ width: 800px; he

末蓝、/ 2022年02月02日 11:23/ 0 赞/ 389 阅读

相关 CSS Vue 切换背景颜色

原文演示及链接： [https://codepen.io/richardtallent/pen/yvpERW/][https_codepen.io_richardtallent

短命女/ 2022年01月30日 06:41/ 0 赞/ 310 阅读

相关 CSS 背景颜色渐变

<style type="text/css"> html,body \{ margin:0px; width

水深无声/ 2021年11月29日 09:32/ 0 赞/ 480 阅读

相关 css背景和颜色，了解一下

div{ background:url(a.gif); background-size: 10px 10px; background-size: cover 宽度

缺乏、安全感/ 2021年09月15日 12:52/ 0 赞/ 400 阅读

相关【前端】CSS 背景颜色渐变

过使用 CSS3 线性渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡，由于用到CSS3所以需要考虑下浏览器兼容问题，例如：从左到右的线性渐变，且带有透明度的样...

你的名字/ 2021年01月07日 12:16/ 0 赞/ 814 阅读