vue动态绑定class的几种常用方式小结


Posted in Javascript onMay 21, 2019

本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考,具体如下:

对象方法

最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)

:class="{ 'active': isActive }"
  • 判断是否绑定一个active
:class="{'active':isActive==-1}"

或者

:class="{'active':isActive==index}"
  • 绑定并判断多个

第一种(用逗号隔开)

:class="{ 'active': isActive, 'sort': isSort }"

第二种(放在data里面)

//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样
:class="classObject"
data() {
 return {
  classObject:{ active: true, sort:false }
 }
}

第三种(使用computed属性)

:class="classObject"
data() {
 return {
  isActive: true,
  isSort: false
 }
},
computed: {
 classObject: function () {
  return {
   active: this.isActive,
   sort:this.isSort
  }
 }
}

数组方法

  • 单纯数组
:class="[isActive,isSort]"
data() {
 return{
  isActive:'active',
  isSort:'sort'
 }
}
  • 数组与三元运算符结合判断选择需要的class

(注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染)

:class="[isActive?'active':'']"

或者

:class="[isActive==1?'active':'']"

或者

:class="[isActive==index?'active':'']"

或者

:class="[isActive==index?'active':'otherActiveClass']"
  • 数组对象结合动态判断
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
:class="[{ active: isActive }, 'sort']"

或者

:class="[{ active: isActive==1 }, 'sort']"

或者

:class="[{ active: isActive==index }, 'sort']"

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
express启用https使用小记
May 21 #Javascript
使用express获取微信小程序二维码小记
May 21 #Javascript
小程序server请求微信服务器超时的解决方法
May 21 #Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 #Javascript
用node.js写一个jenkins发版脚本
May 21 #Javascript
vue-router源码之history类的浅析
May 21 #Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 #Javascript
You might like
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python入门教程之if语句的用法
2015/05/14 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python批量创建指定名称的文件夹
2019/03/21 Python
OpenCV 边缘检测
2019/07/10 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python时间time模块处理大全
2020/10/25 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
美容院合作经营协议书
2014/10/10 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
学校学期工作总结
2015/08/13 职场文书