1、对象语法

<div class="static"

     v-bind:class="{ active: isActive, 'text-danger': hasError }">

</div>

data: {

  isActive: true,

  hasError: false

}

2、数组语法

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

vue class绑定方式的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  3. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  4. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  8. Vue 双向绑定原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统. 一.访问器属性:Object.defineProperty ECMAScript 262v5带来的新东西,FF把它归入为jav ...

  9. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

随机推荐

  1. List里面的对象被覆盖

    对于for循环,当对象创建在for循环外时,list里面的内容会被覆盖··· 解决办法:把对象创建放入for循环里面: 具体原理:若是放到在for外,对象是同一个,放到for到里面,每次都创建一个新的 ...

  2. 文件处理.Windows.Fastcopy.3.50.x64.文件复制简体中文破解版(验证版)

    摘要:Fastcopy 3.50 + x64 绿色汉化中文版由知索网汉化发布.Fastcopy 是一款来自日本的最快的文件拷贝工具.磁盘间相互拷贝文件是司空见惯的事情,通常情况都是利用 WINDOWS ...

  3. Java众神之路（2）-标志符

    标志符 1.1标志符:用来标志类名.变量名.方法名.类型名.文件名的有效字符序列成为标志符. 1.2命名规则: Java语言规定标志符由字母(a-zA-Z).下划线(_).美元符号($)和数字(0-9 ...

  4. java的图像界面

    package test; import java.awt.FlowLayout; import java.awt.event.ActionListener; import java.awt.even ...

  5. 【HDOJ5559】Frog and String（构造）

    题意:给定n,m,k,要求构造出一个长度为n,最多使用前k个大写字母,有m个不同回文子串的字符串 1<=n,m<=1e5,1<=k<=26 思路:打表找规律 本质上是要找到不让 ...

  6. 【SPOJ61】Brackets（线段树）

    题意:给出一个括号序列,要求维护两种操作: 1.将第x位上的括号取反 2.查询当前整个括号序列是否匹配 n<=3e4 思路:线段树维护区间内没有匹配的左右括号数量 pushup时t[p].r=t ...

  7. COGS【831】最短网络

    831. [USACO 3.1] 最短网络 ★   输入文件:agrinet.in   输出文件:agrinet.out   简单对比 时间限制:1 s   内存限制:128 MB usaco/agr ...

  8. 牛客挑战赛14-F细胞

    https://www.nowcoder.com/acm/contest/81/F 循环卷积的裸题,太久没做FFT了,这么裸的循环卷积都看不出来 注意一下本文的mod 都是指表示幂的模数,而不是NTT ...

  9. [LeetCode] String to Integer (atoi) 字符串

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  10. java 去html标签，去除字符串中的空格,回车,换行符,制表符

    public static String getonerow(String allLine,String myfind)     {                           Pattern ...