【vue学习】vue改变样式
【vue学习】Vue改变样式
css样式
<style>
.mydiv{
width:400px;
height:50px;
background-color: gray;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.green{
background-color: green;
}
.mywidth{
width: 450px;
}
</style>1.class的动态绑定
<body>
<div id="app">
<div v-bind:class="{red:temp}"class="mydiv"></div>
<button type="button" @click="temp=!temp">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
<script>
var v1 = new Vue({
el:"#app",
data:{
temp:false
}
})
</script>
</body>2.通过computed返回一个对象，对象里放着多个键值对
<body>
<div id="app">
<div :class="myClassStyle" class="mydiv"></div>
<button type="button" @click="temp=!temp">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app",
data:{
temp:false
},
computed:{
myClassStyle:function(){
return{
red:this.temp,
mywidth:this.temp
}
}
}
})
</script>
</body>3.双向绑定的体现
<body>
<div id="app">
<div :class="mycolor" class="mydiv"></div>
<button type="button" @click="temp=!temp">点我</button>
<!-- 绑定数据mycolor -->
<input type="text" v-model="mycolor" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app",
data:{
temp:false,
mycolor:'green'
},
computed:{
myClassStyle:function(){
return{
red:this.temp,
mywidth:this.temp
}
}
}
})
</script>
</body>4.多个样式操作
<body>
<div id="app">
<div :class="[mycolor,mv]" class="mydiv"></div>
<button type="button" @click="temp=!temp">点我</button>
<input type="text" v-model="mycolor" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app",
data:{
temp:false,
mycolor:'green',
mv:"mywidth"
},
computed:{
myClassStyle:function(){
return{
red:this.temp,
mywidth:this.temp
}
}
}
})
</script>
</body>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录