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

<!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>

运行结果:

在这里插入图片描述

既然没有天资聪慧,那么后期就需要不断努力!!

你可能感兴趣的:(结合Vue的method方法和h5标签修改字体背景颜色)