Vue.js样式动态绑定实现小结

2020-11-27 来源：步旅网

在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结：

动态切换的核心思想：

利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～

vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这种特性，我们得以实现class和style的动态绑定～

（一定要充分理解数据驱动的含义，共勉～）

特别说明：

1. v-bind在处理class和style时，专门增强了它。表达式的结果类型不仅可以是字符串，还可以是对象和数组。

v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id === :id 。

根据不同的项目需求和不同的实现思路，现初步总结了如下方法：

（欢迎小伙伴们补充添加，一起进步～～）

class属性绑定

1. 三目元算符方式：

<!--vue代码-->
 <ul>
 <li v-for="item in itemData" :key="item">
 <i :class="item.isA ? 'class_a' : 'class_b'"></i> 
 </li>
 </ul>

 <!-- CSS代码 -->
 .class_a,.class_b{
 /*这里可以写一些公共样式*/
 }

 .class_a{
 /*这里写需要设置的第一种样式*/
 }

 .class_b{
 /*这里写需要设置的第二种样式*/
 }

2. 基本绑定：

<!--vue代码-->
 <div :class="{class_a:isActive}"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 isActive:true
 }
 }
 }

<!-- CSS代码 -->
 .class_a{
 /*这里写需要设置的样式*/
 }

以上可以根据isACtive的值，动态判断来进行class样式的绑定。

特别说明：

1. vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量，可以通过 class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。

2. v-bind:class 虽然与class属性里绑定变量的方式不能共存，却可以与原生的class特性共存，即一个DOM标签中允许同时出现原生class和v-bind:class。

3. 为了避免不必要的问题，要写在data中的值尽量不要用中划线，可以采用下划线～如果data中用中划线的话，需要加单引号，否则出错，而且，在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。
3. 可以传入多个属性动态切换多个class

<!--vue代码--> <div :class="{class_a:isActive,class_b:isActive_b}"></div>

4. 对象绑定

<!--vue代码-->
 <div ：class="classObject"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 classObject:{
 class_a:true,
 class_b:true
 }
 }
 }
 }

<!-- CSS代码 -->
 .class_a{
 /*这里写需要设置的第一种样式*/
 }

 .class_b{
 /*这里写需要设置的第二种样式*/
 }

特别说明：

这里v-bind直接利用对象进行绑定，需注意对象中的键名应与class样式名保持一致。

5. 数组绑定

数组里的变量改变时，动态更新class列表

<!--vue代码-->
 <div ：class="[classA,classB]"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 classA:'class_a',
 classB:'class_b'
 }
 }
 }

<!-- CSS代码 -->
 .class_a{
 /*这里写需要设置的第一种样式*/
 }

 .class_b{
 /*这里写需要设置的第二种样式*/
 }

6. 绑定返回对象的计算属性

强大且常用的模式～

<!--vue代码-->
 <div v-bind="classObject"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 isActive:true
 }
 },
 computed:{
 classObject:function () {
 return{
 class_a:this.isActive,
 class_b:!this.isActive
 // 这里要结合自身项目情况修改填写
 }
 }
 }
 }

<!-- CSS代码 -->
 .class_a{
 /*这里写需要设置的第一种样式*/
 }

 .class_b{
 /*这里写需要设置的第二种样式*/
 }

style属性绑定（内联）

1. 直接设置样式

<!--vue代码-->
 <div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 selectedColor:pink,
 fontSize:20
 // 注意前后名称的一致性
 }
 }
 }

2. 也可以使用对象

（可以参照上述class）

<!--vue代码-->
 <div ：style="styleObject"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 styleObject{
 selectedColor:pink,
 fontSize:20
 }
 }
 }
 }

3. 使用数组

<!--vue代码-->
 <div :style="[styleA,styleB]"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
 export default {
 name: "test1",
 data(){
 return{
 styleA:{
 color:'red',
 fontSize: '30px'
 },
 styleB:{
 color:'green',
 fontSize: '15px'
 },
 }
 }
 }

小伙伴们可根据上述方法结合自身项目情况修改调用，如有问题，欢迎交流

显示全文

全部栏目

Vue.js样式动态绑定实现小结