vue点击按钮切换颜色(v-bind的使用)
<style type="text/css">div#box{width: 100px;height: 100px;color: darkgray;}.red{background-color: red;}...
·
<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>
要点:class要转变为vue的属性,加上v-bind:或者:,class的值可以是一个对象,对象里面可以写多个属性,借助button改变isRed的值来改变颜色。
更多推荐
已为社区贡献1条内容
所有评论(0)