(1) 对style 进行绑定
举例：点击按钮显示和隐藏元素(开关思想)
<div id="app">
<button v-on:click="btnclicked">showbutton>
<div :style="{display:n}">{{msg}}div>
div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:true,
n:"block"
},
methods:{
btnclicked(){
this.flag=!this.flag
if(this.flag){
this.n="block"
}else{
this.n="none"
}
}
}
})
script>
也可以添加一个对象进行修改
<div :style="obj">{{msg}}div>
obj:{
color:"red",
fontSize:"30px"
}
也可以直接在style里面使用多个变量对象，或者直接写上对象
<div :style="[box1,box2]">{{msg}}div>
box1:{
fontSize:"10px",
width:"40px",
},
box2:{
height:"40px",
background:"red"
}
(2)对class 属性进行绑定
如果要修改父盒子中所有得元素就可以使用class绑定
举例：点击按钮切换盒子得背景颜色
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
.box{
width: 70px;
height: 150px;
text-align: center;
}
.day{
background-color: rgb(238, 233, 227);
}
.night{
background-color: rgb(5, 5, 5);
color: aliceblue;
}
style>
head>
<body>
<div id="app">
<button @click="chang">{{msg}}button>
<div :class="['box',model]">
<p>hellop>
<p>hellop>
<p>hellop>
<p>hellop>
div>
div>
<script>
new Vue({
el:"#app",
data:{
msg:"白天",
flag:true,
model:"day"
},
methods:{
chang(){
this.flag=!this.flag
if(this.flag){
this.model="day";
this.msg="白天"
}else{
this.model="night";
this.msg="晚上"
}
}
}
})
script>