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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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
php 清除网页病毒的方法
2008/12/05 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
git进行版本控制心得详谈
2017/12/10 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
关于Django Models CharField 参数说明
2020/03/31 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
电工技术比武方案
2014/05/11 职场文书
扬尘污染防治方案
2014/06/15 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL