文章目录
Vue:绑定样式
一、绑定class样式
1、字符串写法
<div id="root">
<div class="base" :class="mood" @click="changeMood">{{name}}</div>
</div>
new Vue({
el:'#root',
data:{
name:'Hello World',
mood:"happy"
},
methods: {
changeMood(){
const arr = ['happy', 'bad', 'norlly'];
//三种样式随机一种
const index = Math.floor(Math.random()*3);
this.mood = arr[index]
}
},
})
2、数组写法
<div class="base" :class="arr" @click="changeMood">{{name}}</div>
new Vue({
el:'#root',
data:{
name:'Hello World',
mood:"happy",
arr:['happy', 'bad', 'norlly']
},
methods: {
changeMood(){
const arr = ['happy', 'bad', 'norlly'];
//三种样式随机一种
const index = Math.floor(Math.random()*3);
this.mood = arr[index]
}
},
})
3、对象写法
<div class="base" :class="classObj" @click="changeMood">{{name}}</div>
new Vue({
el:'#root',
data:{
name:'Hello World',
mood:"happy",
arr:['happy', 'bad', 'norlly'],
classObj:{
happy:false,
bad:false,
norlly:true
}
},
methods: {
changeMood(){
const arr = ['happy', 'bad', 'norlly'];
//三种样式随机一种
const index = Math.floor(Math.random()*3);
this.mood = arr[index]
}
},
})
二、绑定style样式
1、对象写法
<div class="base" :style="styleObj">{{name}}</div>
new Vue({
el:'#root',
data:{
name:'Hello World',
styleObj:{
fontSize: '40px'
}
}
})
2、数组写法
<div class="base" :style="styleArr">{{name}}</div>
new Vue({
el:'#root',
data:{
name:'Hello World',
styleArr:[
{
fontSize:'40px',
color:'blue'
},
{
backgroundColor:'green'
}
]
}
})