4. class 和 style 的绑定语法
这两个其实是标签上面的属性,例如:
<p class='one two' style='color:red;'>this is a test</p>
既然是属性,那么我们就可以使用上午所学的特性的绑定方式,来将这两个值和 data 相关联。
但是,比较麻烦。所以 vue 对这两个属性专门做了增强,可以采用对象的和数组的方式来进行绑定。
class
对象语法:可以给class绑定一个对象,而非字符串。
代码示例如下:
<body>
<div id="app">
<p :class='abc'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
abc: {
one: true,
two: true,
three: false
}
}
})
</script>
</body>
也可以写作一个计算属性。示例:
<body>
<div id="app">
<p :class='abc'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
computed: {
abc(){
return {
one : true,
two : false,
three : true
}
}
},
})
</script>
</body>
数组的语法:就是给 class 绑定一个数组。示例如下:
<body>
<div id="app">
<p :class='[a,b,c]'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data : {
a : 'one',
b : 'two',
c : 'three'
}
})
</script>
</body>
数组的写法比较灵活,甚至可以使用三目运算
<body>
<div id="app">
<p :class='[a ? b : c]'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data : {
a : false,
b : 'two',
c : 'three'
}
})
</script>
</body>
style
style 和 class 类似,也是提供了对象和数组的写法。
对象的写法,示例如下:
<body>
<div id="app">
<!-- <p style="color: red; font-size: 32px;">this is a test</p> -->
<p :style='style'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data : {
style : {
color : 'red',
fontSize : '32px'
}
}
})
</script>
</body>
数组的写法,其实就是多个对象的数组,每个对象是一段样式设置。
<body>
<div id="app">
<p :style='[style1,style2]'>this is a test</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data : {
style1 : {
color : 'red',
fontSize : '32px'
},
style2 : {
color : 'blue',
textDecoration : 'underline'
}
}
})
</script>
</body>