04.vue-charp-04 v-bind及其class与style绑定
Posted easy5weikai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了04.vue-charp-04 v-bind及其class与style绑定相关的知识，希望对你有一定的参考价值。
了解v-bind指令
我们已经介绍了指令v-bind的基本用法以及它的语法糖，它的主要用法是动态更新html元素上的属性
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。
绑定class的几种方式
对象语法
- 使用data
<body>
<div id="app">
<div class="class1" :class="{‘class2‘:hasClass2, ‘class3‘:hasClass3}">对象语法:使用data </div>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
hasClass2: true,
hasClass3: false
}
})
</script>
</body>
html 被渲染为：
<div class="class1" :class="{‘class2‘:hasClass2, ‘class3‘:hasClass3}">对象语法:使用data </div>
-
使用计算属性
<div class="class1" :class="classesOfcomputed">对象语法:使用计算属性 </div> <script> var app = new Vue({ el: ‘#app‘, data: { hasClass2: true, hasClass3: false }, computed: { classesOfcomputed: function () { //返回一个对象 return { ‘class2‘: this.hasClass2, ‘class3‘: this.hasClass3 } } }, }) </script>html 被渲染为：
<div class="class1" :class="classesOfcomputed">对象语法:使用计算属性 </div>数组语法
<div id="app"> <div class="class1" :class="[class4, class5]">数组语法:使用data </div> <div class="class1" :class="[{‘class2‘:hasClass2}, class3]">数组语法中使用对象语法（使用data） </div> <div class="class1" :class="[classesOfcomputed]">数组语法中使用对象语法 （使用计算属性）</div> </div> <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script> <script> var app = new Vue({ el: ‘#app‘, data: { hasClass2: true, class3: ‘class3-value‘, class4: ‘class4-value‘, class5: ‘class5-value‘, size: ‘large‘, disabled: true }, computed: { classesOfcomputed: function () { //返回一个对象 return [ ‘btn‘, { [‘btn-‘ + this.size]: this.size != ‘‘, [‘btn-disabled‘]: this.disabled } ] } }, }) </script>html渲染为：
<div id="app"> <div class="class1 class4-value class5-value">数组语法:使用data </div> <div class="class1 class2 class3-value">数组语法中使用对象语法（使用data） </div> <div class="class1 btn btn-large btn-disabled">数组语法中使用对象语法 （使用计算属性）</div> </div>? 使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性
在组件上使用
仅适用于自定义组件的最外层是一个根元素
<body>
<div id="app">
<my-component :class="{‘class2‘:hasClass2}"></my-component>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
//定义全局组件
Vue.component(‘my-component‘, {
template: ‘<p class="class1">这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，</p>‘
})
var app = new Vue({
el: ‘#app‘,
data: {
hasClass2: true
}
})
</script>
</body>
html渲染为：
<p class="class1 class2">这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，</p>
? 这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递。这些用法同样适用于下一节中绑定内联样式 style的内容。
绑定内联样式（v-bind:style）
使用v-bind:style
<body>
<div id="app">
<div style="margin:50px;" :style="{‘color‘:color, ‘font-size‘:fontSize}">:style绑定样式（使用data）</div>
<div style="margin:50px;" :style="styles">:style绑定样式(使用数组对象)</div>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
color: ‘red‘,
fontSize: 14 + "px",
styles: {
color: ‘blue‘,
fontSize: 30 + "px"
}
}
})
</script>
</body>
源码地址
https://github.com/K-Artisan/vue.js-in-ation-book-note
以上是关于04.vue-charp-04 v-bind及其class与style绑定的主要内容，如果未能解决你的问题，请参考以下文章