Vue - Class 与 Style 绑定
数据绑定一个常见需求是操作元素的class列表和它的内联样式,因为它们都是属性,我们可以用 v-bind
处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind
用于 class 和 style 时,Vue.js专门增强了它,表达式的结果类型除了字符串之外,还可以是对象或数组。
class 对象语法
如果数据属性 发生改变,class 列表将相应地更新。
字面量对象绑定
<style>
.aa{ color: red; }
.bb{ color: pink; }
.cc{ background: yellow; }
</style>
<div id="app">
<p v-bind:class="{ aa: isAa, bb: isBb, cc: true }">永远相信美好的事情即将发生</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isAa: true,
isBb: false,
}
})
</script>
数据对象绑定
<style>
.aa{ color: red; }
.bb{ color: green; }
.cc{ background: yellow; }
</style>
<div id="app">
<p v-bind:class="classObject">心没有栖息的地方,到哪都是流浪</p>
</div>
<script>
new Vue({
el: '#app',
data: {
classObject: {
aa: false,
bb: true,
cc: true
}
}
})
</script>
计算属性绑定
还是不知道该用什么方法使用
<style>
.aa{ color: red; }
.bb{ color: green; }
.cc{ background: yellow; }
</style>
<div id="app">
<p v-bind:class="classObjects">心没有栖息的地方,到哪都是流浪</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isAa: true,
isBb: false,
error: null
},
computed: {
classObjects () {
return {
aa: this.isAa,
bb: this.isBb,
cc: this.error
}
}
}
})
</script>
## class 数组语法 ### 普通数组绑定 ```
心没有栖息的地方,到哪都是流浪
数组 三元表达式绑定
<style>
.aa{ color: red; }
.bb{ color: green; }
.cc{ background: yellow; }
</style>
<div id="app">
<!-- 如果isActive为false 则不会添加active -->
<p v-bind:class="[isActive ? active : '', hover ]">心没有栖息的地方,到哪都是流浪</p>
</div>
<script>
new Vue({
el: '#app',
data: {
active: 'cc',
hover: 'bb',
isActive: true
}
})
</script>
数组 对象形式
<style>
.aa{ color: red; }
.bb{ color: green; }
.cc{ background: yellow; }
</style>
<div id="app">
<p v-bind:class="[{aa: isActive, cc: isFocus}, hover ]">心没有栖息的地方,到哪都是流浪</p>
</div>
<script>
new Vue({
el: '#app',
data: {
hover: 'bb',
isActive: false,
isFocus: true
}
})
</script>
class 用在组件上
<style>
.aa{ color: red; }
.bb{ color: green; }
.cc{ background: yellow; }
</style>
<div id="app">
<my-component v-bind:class="classObject"></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<p class="aa">Hello World ! !</p>'
})
new Vue({
el: '#app',
data: {
classObject: {
bb: true,
cc: true
}
}
})
</script>
style 绑定内联样式
跟class绑定一致相同
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:
<div id="app">
<p v-bind:style="{ color: isColor, fontSize: isFontSize + 'px' }">Hello World ! ! </p>
</div>
<script>
new Vue({
el: '#app',
data: {
isColor: 'red',
isFontSize: 30
}
})
</script>
使用 计算属性 更方便了
<div id="app">
<p v-bind:style="styleObj">Hello World ! ! </p>
</div>
<script>
new Vue({
el: '#app',
data: {
isColor: 'red',
isFontSize: '30px'
},
computed: {
styleObj () {
return {
color: this.isColor,
fontSize: this.isFontSize
}
}
}
})
</script>
数组语法
<!-- 可以直接是css样式 -->
<p v-bind:style="{background: 'red', color: '#fff'}">Hello World ! ! </p>
<!-- 也可以是对象数组 -->
<p v-bind:style="[{background: 'red', color: '#fff'}]">Hello World ! ! </p>
<div id="app">
<p v-bind:style="[style1, style2]">Hello World ! ! </p>
</div>
<script>
new Vue({
el: '#app',
data: {
style1: {
background: 'red',
color: '#fff'
},
style2: {
fontSize: '30px'
}
}
})
</script>