vue bind class,vue绑定class方法
向元素添加/删除类是开发中非常常见的行为之一。例如，网站导航会在选定的项目中添加一个活动类，以区分选定和未选定的样式。那么我们如何处理vue中的这种效果呢？让我们一起来看看吧。
向项目中的元素添加/删除类是非常常见的行为之一。例如，在网站导航中，一个活动类被添加到选定的项目，以区分选定和未选定的样式。除了导航之外，这种方法在其他很多地方也被用来处理选中和未选中的样式。
除了设置类，我们还经常设置项目中元素的内联样式。在jquery时代，我们大多使用addclass和removeClass的组合来处理类的添加/删除，使用css()方法来设置/获取元素的内联样式。
那么我们如何处理vue中的这种效果呢？在vue中，我们可以使用v-bind指令来绑定我们的类和样式。接下来，我们来看看vue为我们提供了哪些绑定它们的方式。
对象语法绑定 Class
标签切换是我们最常见的效果之一。如何让选中的标题高亮，常用的方法是动态切换类。
div id=应用程序
div class=button-group
按钮
v-for=(tab，index) in tabs
v-bind:key=index
v-bind:class= { active:current tab===tab }
v-on:click=currentTab=tab
{{tab}}/button
/div
组件v-bind:is= currentTabComponent /component
/div
脚本
Vue.component(tab1 ，{
模板“:”球体是选项卡页面1/p
});
Vue.component(tab2 ，{
模板:球体是第2页/p 选项卡
});
Vue.component(表3 ，{
模板:球体是第3页/p 选项卡
});
var vm=new Vue({
埃尔： #app ，
数据：{
当前标签:“标签1”，
制表符：[tab1 ， tab2 ， tab3]
},
计算值：{
currentTabComponent() {
返回this.currentTab
}
}
});
/脚本
从这个例子中，我们可以看出，类active是否存在取决于下面的表达式是真还是假。当它为真时，active类被添加到元素中，否则不添加。
不仅可以添加一个类，还可以同时添加多个类，可以和原有类共存。
按钮
class=btn
v-bind:class= { BTN-primary :is primary，active: isActive}
/按钮
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isPrimary:没错，
isActive:真的
}
});
/脚本
渲染结果是：
按钮class= BTN BTN-主要活动/按钮
我们也可以直接绑定一个数据对象。
按钮class= BTN v-bind:class= active primary /按钮
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
activePrimary: {
btn-primary: true，
活动：真
}
}
});
/脚本
渲染结果同上。
按钮class= BTN BTN-主要活动/按钮
此外，我们还可以使用计算属性来绑定元素的类。
按钮v-bind:class= active class /button
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isActive:真的
},
计算值：{
activeClass() {
返回{
active: this.isActive
}
}
}
});
/脚本
数组语法绑定 Class
Vue也支持我们通过使用数组给元素添加类。我们修改上面向对象添加类的例子。
button class= BTN v-bind:class=[primary，active]/button
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
主要： BTN-主要，
主动： BTN-主动
}
});
/脚本
按照上面的方式，我们绑定固定的。如果我们需要动态切换类怎么办？我们可以使用三元表达式或在数组中使用对象语法。
//三元表达式
按钮v-bind:class=[isActive？活动： ，主要]/按钮
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isActive:没错，
主要： BTN-主要，
主动： BTN-主动
}
});
/脚本
//在数组中使用对象语法
button v-bind:class=[{ active:is active }，primary]/button
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
isActive:没错，
主要： BTN-主要
}
});
/脚本
对象语法绑定 Style
绑定内联样式时的对象语法看起来非常像css，但它实际上是一个Javascript对象。我们可以用驼峰或破折号来分隔名称。
div v-bind:style= { color:color style，backgroundColor: background}
对象语法
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
颜色样式：“红色”，
背景：“蓝色”
}
});
/脚本
类似于类，我们也可以通过使用数据对象来绑定。
Div-bind: style= style 对象语法/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
风格：{
颜色：红色，
背景颜色：“蓝色”
}
}
});
/脚本
数组语法绑定 Style
Vue允许我们同时将多个样式对象绑定到同一个对象。
Div-bind: style= [style，font style]对象语法/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
风格：{
颜色：红色，
背景颜色：“蓝色”
},
fontStyle: {
字体大小：“18px”
}
}
});
/脚本
关于Vue中Class和Style实现v-bind绑定的几种用法的这篇文章到此为止。更多Vue v-bind绑定用法的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。