vue改变class内的属性_vue绑定html的class属性的⽅法⼀、对象语法绑定class属性
class的属性代码如下
.red{
color: red;
width: 100px;
height: 100px;
border: 2px;
border-color: blue;
border-style: solid;
}
1、⽤之前的⽅法绑定⼀下class属性
11111111111
2、使⽤v-bind的⽅式，绑定⼀个字符串
22222222222222
3、使⽤v-bind的⽅式，绑定⼀个属性
3333333333333
4、使⽤v-bind的⽅式，绑定⼀个对象
444444444444444
这⾥还需要在vue对象中定义isRed这个属性
5、使⽤v-bind的⽅式，绑定⼀个计算属性
55555555555
还需要定义⼀个get⽅式的计算属性
⼆、数组语法绑定class属性
先看css的class属性
.red{
color: red;
width: 200px;
height: 200px;
border: 2px;
border-color: blue;
border-style: solid;
}
.bg{
background-color: yellow;
}
1、使⽤v-bind的⽅式，绑定⼀个数组模式的class属性
22222222
当然我们还需要在vue实例中定义这2个属性的值
2、使⽤v-bind绑定⼀个三元运算符
3333333
当然我们还需要在vue实例中定义isActive这个属性，如果该属性为真，则添加class1对应的class样式，如果该属性为false，则添加class2对应的class样式
3、还可以在数组中写⼀个对象，同样使⽤v-bind语法
44444444
如果isActive为真，则添加bg这个class属性，所以我们需要在vue的实例对象中定义isActive这个属性
4、同样这⾥也可以写⼀个计算属性
555555
同样看下计算属性这个⽅法是怎么写的
5、直接绑定⼀个属性
6666666
同样需要定义⼀个属性
三、绑定html到组件上
先写⼀个组件
Vueponent('tou', {
template: `
内容区域
`,
// 这⾥就是头部组件中的代码methods:{
alertfunction:function(){
alert(123);
}
}
})
然后使⽤这个组件
最后我们定义classobj这个对象
如果我们给组件添加class属性，是把class属性添加到组件的根元素上，且是追加的⽅式添加class属性，不会被覆盖原有的属性
根元素就是div标签
四、绑定内联样式
1、默认的绑定⽅式
1
2、对象的语法
2
我们还需要在vue实例中定义属性
3、同样也可以绑定⼀个对象
3
对象按照下⾯的格式写
cssclass属性
4、传递⼀个数组对象进去
4
同样我们需要定义这2个对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。