04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定
1. 绑定 class 的集中方式
1.1. 对象语法
给class设置一个对象，可以动态切换class。例如：
<body>
<div id="app">
<div :class="{ 'active': isActive }"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
</body>
示例中，类名active依赖数据isActive，当isActive的值为true时，div标签会拥有active类，否者没有。最终渲染效果如下：
<div class="active"></div>
对象中也可以传入过个属性，可以动态切换class。此外，:class可以与普通class共存，例如：
<body>
<div id="app">
<div class="static" :class="{ 'active': isActive, 'error': isError }"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false
}
});
</script>
</body>
当:class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，一般当条件多于两个小时，都可以使用data或computed，例如计算属性：
<body>
<div id="app">
<div :class="classes"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
active: this.isActive && !this.error,
'text-fial': this.error && this.error.type === 'fial'
}
}
}
});
</script>
</body>
除了计算属性，还可以绑定一个Object类型的数据，或者使用类似计算属性的methods。
1.2. 数组语法
当你要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
<body>
<div id="app">
<div :class="[activeCls, errorCls]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
activeCls: 'active',
errorCls: 'error'
}
}
}
});
</script>
</body>
渲染结果为：
<div class="active error"></div>
还可以使用三元表达式来切换class，例如：
<body>
<div id="app">
<div :class="[isActive ? activeCls : '', errorCls]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true,
errorCls: 'error',
activeCls: 'active'
}
}
}
});
</script>
</body>
当然这样写也比较麻烦，可以在数组语法中使用对象语法：
<body>
<div id="app">
<div :class="[{'active': isActive}, errorCls]"></div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true,
errorCls: "error"
};
}
}
});
</script>
</body>
使用计算属性可以给元素动态的设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。
1.3. 组件上使用
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如：
<body>
<div id="app">
<my-component :class="{'active': isActive}"></my-component>
</div>
<script>
Vue.component("my-component", {
template: '<p class="article">一些文本</p>'
});
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true
};
}
}
});
</script>
</body>
最终渲染结果是：
<p class="article active">一些文本</p>
这种用法仅仅适合自定义组件的最外层是一个根元素，否者无效，当不满足这种条件还需要给子元素设置类名，那就需要借助于props来传递。
这种方式后续会讲解，此处不做详述。
1.4. 绑定内联样式
使用v-bind:style即:style可以给元素绑定内联样式，方法与:class类似，也有对象和数组语法。例如：
<body>
<div id="app">
<div :style="{'color': color, 'fontSize': fontSize + 'px'}">文本</div>
</div>
<script>
Vue.component("my-component", {
template: '<p class="article">一些文本</p>'
});
var app = new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 14
}
});
</script>
</body>
CSS属性名称使用驼峰命名(camelCase)或短横线分隔命名(kebab-case)，渲染后的结果为：
<div style="color: red; font-size: 14px;">文本</div>
很多时候样式都比较多，不方便维护，所以一般写在data或者computed里，以data为例改写示例：
<body>
<div id="app">
<div :style="styles">文本</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
styles: {
color: 'red',
fontSize: 14 + 'px'
}
}
});
</script>
</body>
应用多个样式对象时，可以使用数组语法：
<div :style="[styleA, styleB]">文本</div>
在实际业务中，:style的数组语法并不常用，往往可以将样式写在一个对象里；比较常用的应当是计算属性。
2. 章节总结
本章主要讲了类名和样式的绑定，以及一个常用的绑定方式。在后面的内容中，将继续穿插使用这些特性。
当你的才华撑不起自己的野心，那就努力学习吧！
浙公网安备 33010602011771号