vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象的属性,属性值是一个布尔值,在data中定义false class不会显示样式,如果是true,则正常显示样式;在数组中,也是数组的值是属性,属性值是真正的元素class;
style 也是和class一样,可以是数组,也可以是对象
<template>
<div class="hello">
<ul>
<li @click="handleClick"
:key="item.index"
v-for="(item,index) in list">{{item}}
</li>
</ul>
<p @click="change" v-text="msg" :class="[active]"></p>
<p :class="{active:isActive}">{{fullName}}</p>
<p :style="styObj" @click="handleClickStyle">你好Vue</p>
</div>
</template>
<script>
export default {
props: ['list'],
data ()
{
return {
msg: 'helloword',
fistName: 'Dell',
secondName: 'Lee',
age: 28,
isActive:false,
active:'',
styObj:{
color:'black',
fontSize:'20px'
}
}
},
methods: {
change ()
{
//class 对象
this.isActive = !this.isActive;
/* if(this.active ==='active'){
this.active = ''
}else {
this.active ='active'
}*/
//三元运算符代替上面的if语句
//class 数组
this.active = this.active ==='active'? "":'active'
},
//对象绑定样式style
handleClickStyle(){
this.styObj.color = this.styObj.color==='black'?'red':'black'
}
},