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

 更新时间:2019年01月24日 14:51:44   作者:koreyoshia  
这篇文章主要介绍了Vue.js样式动态绑定实现小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在项目中,我们时常会遇到动态的去绑定操作切换不同的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中使用echarts实现上浮与下钻效果

    在vue中使用echarts实现上浮与下钻效果

    这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue 中使用vue2-highcharts实现top功能的示例

    Vue 中使用vue2-highcharts实现top功能的示例

    下面小编就为大家分享一篇Vue 中使用vue2-highcharts实现top功能的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中的Object.freeze() 优化数据方式

    vue中的Object.freeze() 优化数据方式

    这篇文章主要介绍了vue中的Object.freeze()优化数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 2.0封装model组件的方法

    vue 2.0封装model组件的方法

    本篇文章主要介绍了vue 2.0封装model组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue仿淘宝滑动验证码功能(样式模仿)

    vue仿淘宝滑动验证码功能(样式模仿)

    淘宝大家都使用过,淘宝滑动验证码的目的是为了验证到底是人还是机器,今天小编给大家分享的是模仿淘宝滑动验证码的样式,感兴趣的朋友跟随小编一起看看吧
    2019-12-12
  • antd Form组件表单在vue3中的使用方式

    antd Form组件表单在vue3中的使用方式

    这篇文章主要介绍了antd Form组件表单在vue3中的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 详解Vue3的虚拟DOM是如何生成的

    详解Vue3的虚拟DOM是如何生成的

    这篇文章给大家详细介绍了 Vue3 的虚拟DOM生成规则,文章通过代码示例和图片介绍的非常详细,具有一定的参考价值,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • Vue.js中组件中的slot实例详解

    Vue.js中组件中的slot实例详解

    这篇文章主要介绍了Vue.js中组件中的slot实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Vue3 源码导读(推荐)

    Vue3 源码导读(推荐)

    这篇文章主要介绍了Vue3 源码导读(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论