Vue之动态class写法总结
对象方法
最简单的绑定
: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之动态class写法总结的更多相关文章
- vue中动态class写法
<div class="wrap" :class="{active:index==current}"></div> <div cl ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Vue中通过Vue.extend动态创建实例
Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- vue 高度 动态更新计算 calcHeight watch $route
vue 高度 动态更新计算 calcHeight () { // this.tableHeight = window.innerHeight - 210 } }, mounted () { // co ...
随机推荐
- Android新项目GBSS:第1篇 搭建开发环境
最近接手一个Android新项目,之前也没做过这方面的开发,算是边学边干,这两天看了一下Android开发的书,大致入门了一点,今天把所需要的软件都下了下来,准备开工,先列一下开发环境: 所有的软件都 ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- GitHub-Tech-DotNet:Cnblogs
ylbtech-GitHub-Tech-DotNet:Cnblogs 1.返回顶部 · EnyimMemcachedCore Forked from enyim/EnyimMemcached A Me ...
- 2019.11.10【每天学点SAP小知识】Day3 - ABAP 7.40新语法 值转化和值赋值
1.语法为 CONV dTYPE|#(...)\ # 代表任意类型 "7.40之前表达式 . DATA helper TYPE string. DATA xstr TYPE xstring. ...
- OpenID简介
OpenID 是一个以用户为中心的数字身份识别框架,它具有开放.分散性.OpenID 的创建基于这样一个概念:我们可以通过 URI (又叫 URL 或网站地址)来认证一个网站的唯一身份,同理,我们也可 ...
- C++中类中常规变量、const、static、static const(const static)成员变量的声明和初始化
C++类有几种类型的数据成员:普通类型.常量(const).静态(static).静态常量(static const).这里分别探讨以下他们在C++11之前和之后的初始化方式. c++11之前版本的初 ...
- DOM事件练习 II
select框联动效果 需求:当在textarea中输入内容,点击留言按钮,会添加到浏览器中,最新留言出现在最顶端. <!DOCTYPE html> <html lang=" ...
- random、json、pickle、hashlib、hmac、shutil、shevle模块
今日内容: 1. random 模块 2. json模块 3. pickle 模块 4.hashlib 模块 5. hmac 模块 6. shutil 模块 7. shelve 模块 1. rando ...
- 配置中心 Spring Cloud config
配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. 1.服务端 创建spring boot 项目 主要依赖 <dependenc ...
- github 上传大文件100MB姿势
最新想把写一个一键配置Linux的脚本,所以就要安装一些软件咯,但是把有时候有源码安装比较好,而且有些东西直接传到Github会很方便,可又超过了100MB,Github正常情况下是不允许上传超过10 ...