结合Vue的method方法和h5标签修改字体背景颜色

最新推荐文章于 2024-04-20 20:25:59 发布

Dreamer_Ji

最新推荐文章于 2024-04-20 20:25:59 发布

阅读量1.5k

点赞数 1

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

版权

<!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" >
        颜色:
        //v-model可以进行数据的双向绑定，所以当这边颜色进行修改的时候，M那边的数据也可以相应进行修改。
        <input type="color" v-model="changeColor">
        <input type="button" value="修改颜色" @click="change">
        <p ref="myp">这是什么</p>//使用vue中的ref能够获取想要的dom元素
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                bgcolor:"",
                changeColor:"",
                bgc:""
            },
            methods:{
                change(){
                    //获取p标签的背景颜色并进行相对应的颜色赋值，因此便能成功对所想要修改的内容进行修改。
                    this.$refs.myp.style.backgroundColor=this.changeColor;
                }
            }
        });
    </script>
</body>
</html>