通过watch监听h5的标签颜色选择器进行字体背景颜色的切换，实现更加贴近实际的颜色切换

最新推荐文章于 2024-09-18 23:22:18 发布

Dreamer_Ji

最新推荐文章于 2024-09-18 23:22:18 发布

阅读量527

点赞数

本文链接：https://blog.csdn.net/Dreamer_Ji/article/details/107398219

版权

通过watch监听h5的标签颜色选择器进行字体背景颜色的切换，实现更加贴近实际的颜色切换

通过对data中的数据变化进行监听，从而触发watch中对应的function函数处理。
this.$refs.myp：vue中获取dom元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app" >
        颜色:
        <input type="color" v-model="changeColor">
        <p ref="myp" >这是什么</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                bgcolor:"",
                changeColor:"",
                bgc:""

            },
            watch:{
                'changeColor':function(){
                    this.$refs.myp.style.backgroundColor=this.changeColor;
                }
            }
        });
    </script>
</body>
</html>