Vue中Class数据绑定
Class数据绑定
数据绑定的一个常见需求场景是操作CSS class列表,因为class
是attribute(属性),我们可以和其他attribute一样使用v-bind
将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且容易出错的。因此,Vue 专门为class 的v-bind
用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是数组或对象。
绑定对象Object
<template>
<h3>class数据绑定</h3>
<hr>
<div :class="{active:isActive,'text-danger':hasError}">isActive</div>
<button @click="exchage">切换</button>
</template>
<script>
export default {
data(){
return{
isActive:true,
hasError:true
}
},
methods:{
exchage(){
this.isActive=!this.isActive
}
}
}
</script>
<style scoped>
.active{
color:red;
}
</style>
运行结果
未切换前:
切换后:
多个对象绑定
<template>
<h3>class数据绑定</h3>
<hr>
<div :class="classObject">isActive</div>
<button @click="exchage">切换</button>
</template>
<script>
export default {
data(){
return{
classObject:{
active:true,
'text-danger':true
}
}
},
methods:{
exchage(){
this.classObject.active = !this.classObject.active
}
}
}
</script>
<style scoped>
.active{
color:rgb(132, 0, 255);
font-size: large;
}
</style>
运行结果:
切换前:
切换后:
数组绑定
<template>
<h3>class数据绑定</h3>
<hr>
<div :class="[activeClass,errorClass]">isActive</div>
</template>
<script>
export default {
data(){
return{
activeClass: 'active',
errorClass:'text-danger'
}
},
}
</script>
<style scoped>
.active{
color:red;
}
</style>
运行结果:
如果你想在数组中渲染某个class,你可以使用三元表达式。
<template>
<h3>class数据绑定</h3>
<hr>
<div :class="[isActive ? 'active' : '']">isActive</div>
<button @click="exchage">切换</button>
</template>
<script>
export default {
data(){
return{
isActive:true,
}
},
methods:{
exchage(){
this.isActive=!this.isActive
}
}
}
</script>
<style scoped>
.active{
color:red;
}
</style>
运行结果:
切换:
数组和对象
<template>
<h3>class数据绑定</h3>
<hr>
<div :class="[{'active':isActive},errorClass]">isActive</div>
<button @click="exchage">切换</button>
</template>
<script>
export default {
data(){
return{
isActive:true,
errorClass:"text-danger"
}
},
methods:{
exchage(){
this.isActive=!this.isActive
}
}
}
</script>
<style scoped>
.active{
color:red;
}
</style>
运行结果:
温馨提示:
数组和对象的嵌套过程中,只能数组嵌套对象,不能反其道而行。
原文地址:https://blog.csdn.net/qq_51856496/article/details/140235683
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!