vue点击按钮切换颜色（v-bind的使用）

最新推荐文章于 2023-06-03 23:42:50 发布

曹学成

最新推荐文章于 2023-06-03 23:42:50 发布

阅读量1.2w

点赞数 4

本文链接：https://blog.youkuaiyun.com/caoxuecheng001/article/details/102756779

版权

 <style type="text/css">
        div#box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="isRed=!isRed">点我切换颜色</button>

    <div id="box" v-bind:class="{red:isRed,blue:!isRed}"> 
        我是盒子

    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
   const app=new Vue({
       el:"#app",
       data:{

           isRed:true
           
       }
       
   });
</script>