web前端全系列 教程
1839个小节阅读:2243.7k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表,因为 class
是 attribute,我们可以和其他 attribute 一样使用 v-bind
将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为 class
的 v-bind
用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组
xxxxxxxxxx
<template>
<div :class="{ active: isActive,'text-danger': hasError }">isActive</div>
</template>
<script>
export default {
data(){
return{
isActive:true,
hasError:true
}
}
}
</script>
xxxxxxxxxx
<template>
<div :class="classObject">isActive</div>
</template>
<script>
export default {
data() {
return {
classObject: {
active: true,
'text-danger': true
}
}
}
}
</script>
xxxxxxxxxx
<template>
<div :class="[activeClass,errorClass]">isActive</div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
</script>
如果你也想在数组中有条件地渲染某个 class,你可以使用三元表达式:
xxxxxxxxxx
<template>
<div :class="[isActive ? 'active' : '']">isActive</div>
</template>
<script>
export default {
data() {
return {
isActive:true
}
}
}
</script>
xxxxxxxxxx
<template>
<div :class="[{ 'active':isActive }, errorClass]"></div>
</template>
<script>
export default {
data() {
return {
isActive:true,
errorClass:"text-danger"
}
}
}
</script>
温馨提示
数组和对象嵌套过程中,只能是数组嵌套对象,不能反其道而行