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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
基于php判断客户端类型
2016/10/14 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python 读写文件的操作代码
2018/09/20 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
初中音乐教学反思
2014/01/12 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers