![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/d0d3b707109742dc432144e2406e9c2a.gif)
在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。
除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式。
那么在 vue 中 我们如何处理这类的效果呢?在 vue 中我们可以利用 「v-bind」 指令绑定我们的 class 与 style,接下来我们看看 vue 中给我们提供了哪些绑定它们的方式。
对象语法绑定 Class
Tab 页的切换是我们最常见的一个效果之一,如何让选中的标题高亮,常用的方式就是动态切换 class 。
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/635ccc9dd1c9406718e0cae54b7b2e4c.gif)
<div id="app"> <div class="button-group"> <button v-for="(tab, index) in tabs" v-bind:key="index" v-bind:class="{active: currentTab === tab}" v-on:click="currentTab = tab" >{{tab}}</button> </div> <component v-bind:is="currentTabComponent"></component></div><script>Vue.component("tab1", { "template": "<p>这里是标签页1</p>"});Vue.component("tab2", { "template": "<p>这里是标签页2</p>"});Vue.component("tab3", { "template": "<p>这里是标签页3</p>"});var vm = new Vue({ el: "#app", data: { currentTab: "tab1", tabs: ["tab1", "tab2", "tab3"] }, computed: { currentTabComponent() { return this.currentTab; } }});</script>
<div class="button-group">
<button
v-for="(tab, index) in tabs"
v-bind:key="index"
v-bind:class="{active: currentTab === tab}"
v-on:click="currentTab = tab"
>{{tab}}</button>
</div>
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component("tab1", {
"template": "<p>这里是标签页1</p>"
});
Vue.component("tab2", {
"template": "<p>这里是标签页2</p>"
});
Vue.component("tab3", {
"template": "<p>这里是标签页3</p>"
});
var vm = new Vue({
el: "#app",
data: {
currentTab: "tab1",
tabs: ["tab1", "tab2", "tab3"]
},
computed: {
currentTabComponent() {
return this.currentTab;
}
}
});
</script>
从例子中我们看到 active 这个 class 是否存在取决于后面的表达式是真值或者假值,当为真值时 active 类被添加到元素上否则没有。
我们不仅可以添加一个 class,我们还可以同时添加多个 class,并且还可以与原有的 class 共存。
<button class="btn" v-bind:class="{'btn-primary': isPrimary, active: isActive}"></button><script> var vm = new Vue({ el: "#app", data: { isPrimary: true, isActive: true } });</script>class="btn"
v-bind:class="{'btn-primary': isPrimary, active: isActive}"
></button>
<script>
var vm = new Vue({
el: "#app",
data: {
isPrimary: true,
isActive: true
}
});
</script>
渲染结果为:
<button class="btn btn-primary active"></button>"btn btn-primary active"></button>
我们也可以直接绑定一个数据对象
<button class="btn" v-bind:class="activePrimary"></button><script> var vm = new Vue({ el: "#app", data: { activePrimary: { 'btn-primary': true, active: true } } });</script>"btn" v-bind:class="activePrimary"></button>
<script>
var vm = new Vue({
el: "#app",
data: {
activePrimary: {
'btn-primary': true,
active: true
}
}
});
</script>
渲染结果与上面相同
<button class="btn btn-primary active"></button>"btn btn-primary active"></button>
除此之外,我们还可以使用计算属性去绑定元素的 class。
<button v-bind:class="activeClass"></button><script> var vm = new Vue({ el: "#app", data: { isActive: true }, computed: { activeClass() { return { active: this.isActive } } } });</script>
<script>
var vm = new Vue({
el: "#app",
data: {
isActive: true
},
computed: {
activeClass() {
return {
active: this.isActive
}
}
}
});
</script>
数组语法绑定 Class
Vue 中还支持我们给元素利用数组的方式添加 class,我们修改上面对象添加 class 的例子。
<button class="btn" v-bind:class="[primary, active]"></button><script> var vm = new Vue({ el: "#app", data: { primary: 'btn-primary', active: 'btn-active' } });</script>"btn" v-bind:class="[primary, active]"></button>
<script>
var vm = new Vue({
el: "#app",
data: {
primary: 'btn-primary',
active: 'btn-active'
}
});
</script>
上面方式我们绑定了固定不变的,如果我们需要动态的切换 class 怎么办呢? 我们可以利用三元表达式或者在数组中使用对象语法。
//三元表达式<button v-bind:class="[isActive ? active : '', primary]"></button><script> var vm = new Vue({ el: "#app", data: { isActive: true, primary: 'btn-primary', active: 'btn-active' } });</script>//数组中使用对象语法<button v-bind:class="[{active: isActive}, primary]"></button><script> var vm = new Vue({ el: "#app", data: { isActive: true, primary: 'btn-primary' } });</script>
<button v-bind:class="[isActive ? active : '', primary]"></button>
<script>
var vm = new Vue({
el: "#app",
data: {
isActive: true,
primary: 'btn-primary',
active: 'btn-active'
}
});
</script>
//数组中使用对象语法
<button v-bind:class="[{active: isActive}, primary]"></button>
<script>
var vm = new Vue({
el: "#app",
data: {
isActive: true,
primary: 'btn-primary'
}
});
</script>
对象语法绑定 Style
绑定内联样式时的对象语法,看起来非常像 css,但他其实是一个 Javascript 对象,我们可以使用驼峰式或者短横线分隔命名。
<div v-bind:style="{color: colorStyle, backgroundColor: background}">对象语法</div><script> var vm = new Vue({ el: "#app", data: { colorStyle: 'red', background: 'blue' } });</script>
对象语法
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
colorStyle: 'red',
background: 'blue'
}
});
</script>
与 class 类似我们也可以使用数据对象的方式绑定。
<div v-bind:style="style">对象语法</div><script> var vm = new Vue({ el: "#app", data: { style: { color: 'red', backgroundColor: 'blue' } } });</script></div>
<script>
var vm = new Vue({
el: "#app",
data: {
style: {
color: 'red',
backgroundColor: 'blue'
}
}
});
</script>
数组语法绑定 Style
Vue 允许我们同时绑定多个样式对象作用于同一个对象上。
<div v-bind:style="[style, fontStyle]">对象语法</div><script> var vm = new Vue({ el: "#app", data: { style: { color: 'red', backgroundColor: 'blue' }, fontStyle: { fontSize: '18px' } } });</script></div>
<script>
var vm = new Vue({
el: "#app",
data: {
style: {
color: 'red',
backgroundColor: 'blue'
},
fontStyle: {
fontSize: '18px'
}
}
});
</script>
总结
本文主要是对 Vue 绑定 class 与 style 方式进行学习与梳理。
Vue 给我们提供了对象绑定和数组绑定 class 与 style 的方式,但是选择哪种绑定方式,在我看来都是在于个人喜好。
我个人更倾向于数据对象的方式去绑定,因为它会让我们的模版看起来更加简介,易于后期代码的维护。
如果你觉得本文对你有帮助,欢迎点赞转发,关注公众号 Modeng,可以免费领取大礼包。
觉得本文说的有道理,对你有所帮助 随手转发,点赞长按下方图片,识别二维码,即可关注我
推荐阅读: