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 相关文章推荐
javascript删除option选项的多种方法总结
Nov 22 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
vue点击页面空白处实现保存功能
Nov 06 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 生成加密公钥加密私钥实例详解
2017/06/16 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
小班下学期评语
2014/05/04 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
周年庆典答谢词
2015/01/20 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
详解Python魔法方法之描述符类
2021/05/26 Python