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