标签：href 优先 new computed 使用数组 toc disabled 数据 无效
我们已经介绍了指令v-bind的基本用法以及它的语法糖，它的主要用法是动态更新HTML元素上的属性
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。
<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
<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绑定
标签：href 优先 new computed 使用数组 toc disabled 数据 无效
原文地址：https://www.cnblogs.com/easy5weikai/p/13193437.html
