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


Posted in Javascript onJanuary 24, 2019

在项目中,我们时常会遇到动态的去绑定操作切换不同的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'
        },
      }
    }
  }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
实例讲解JavaScript预编译流程
Jan 24 #Javascript
实例讲解vue源码架构
Jan 24 #Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 #Javascript
JavaScript私有变量实例详解
Jan 24 #Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 #Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 #Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
You might like
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python实现识别手写数字大纲
2018/01/29 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
金融与证券专业求职信
2014/06/22 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
毕业欢送会致辞
2015/07/29 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
如何利用React实现图片识别App
2022/02/18 Javascript