10.Vue中绑定class属性,模板中传递class属性
文章目录class对象类型,动态绑定 {}动态切换动静结合关于写法数组类型,多个绑定在组件上使用单根组件多根组件,$attrs.class因为class和style属性的特殊性(可以有多个),在将v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。class对象类型,动态绑定 {}动态切换我们可以传给 :class
因为class
属性的特殊性(可以有多个值),在将v-bind
用于 class
时,Vue.js
做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
class
对象类型,动态绑定 {}
动态切换
我们可以传给 :class (v-bind:class 的简写) 一个对象,以动态地切换 class:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class与style的绑定</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!--类属性active是否存在,取决于isActive是否为真-->
<div :class="{active: isActive}">
测试1
</div>
</div>
</body>
<script>
const app = {
data() {
return {
isActive: true,
}
}
}
Vue.createApp(app).mount("#app")
</script>
</html>
结果图:
动静结合
:class
也可以和class
共同存在与同一个元素上,:class
动态切换,class
必然出现。
只需要改变上边的html代码:
<div id="app">
<div class="static" :class="{active: isActive}">
测试1
</div>
</div>
运行结果图:
关于写法
在写的时候,可以不将对象直接写在:class
后边,可以写在数据区中。
html:
<div id="app">
<div class="static" :class="myClass">
测试1
</div>
</div>
javaScript:
data() {
return {
myClass: {
active: true,
},
}
}
当需要有一些运算的时候,可以不写在数据区中,而是写在计算属性
中。
html:
<div :class="classObject"></div>
javaScript:
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组类型,多个绑定
数组类型的话,会把每个数组的元素都添加给class
。数组中的元素也可以是对象类型。
style:
<style>
.active {
background-color: red;
}
.error {
background-color: aqua;
}
</style>
html:
<div id="app">
<div class="static" :class="myClass">
测试1
</div>
<div :class="[activeClass, errorClass]">
测试2
</div>
</div>
javaScript:
data() {
return {
myClass: {
active: true,
},
activeClass: {
active: true,
},
errorClass: "error"
}
}
运行效果:
在组件上使用
单根组件
对于单根
的组件,可以,使用效果和直接在元素上使用是一致的。也可以直接使用静态class
,也是可以直接添加到组件的根元素上的。
<div id="app">
<div class="static" :class="myClass">
测试1
</div>
<div :class="[activeClass, errorClass]">
测试2
</div>
<my-component :class="{active: true}"></my-component>
</div>
<script>
const app = {
data() {
return {
myClass: {
active: true,
},
activeClass: {
active: true,
},
errorClass: "error"
}
},
}
const vueApp = Vue.createApp(app)
vueApp.component('my-component', {
template: '<p class="foo bar">测试3</p>'
})
vueApp.mount("#app")
</script>
运行效果:
多根组件,$attrs.class
如果是多根组件的话,需要使用$attrs.class
绑定元素来接收组件上传来的class
属性。
<my-component2 class="static" :class="{active: true}"></my-component2>
vueApp.component('my-component2', {
template: `
<p :class="$attrs.class">测试4</p>
<span>这是多根元素测试</span>
`
})
运行结果:
可以看到,使用:class=$attrs.class
进行绑定的根元素,获取到了模板上的class
值,没有绑定的元素span
上则没有模板上传来的class
值
更多推荐
所有评论(0)