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. Start state is missing. Add at least one state to the flow

    springmvc配置过程中,会配置数据库文件,比如说如下文件:这个时候可能会出现“Start state is missing. Add at least one state to the flow ...

  2. BZOJ2141&洛谷1975 排队 【线段树套treap】

    题目 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的身高有所区别,排 ...

  3. Java代码添加背景音乐

    太心塞!弄了很久才终于把Java添加背景音乐实现了.不过还是很Happy! 这次介绍的办法,是只要一打开Java Application,便可直接听到背景音乐.代码保存,方便以后再次利用. packa ...

  4. [NOIP2013] 提高组 洛谷P1967 货车运输

    题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最多 ...

  5. 【HDOJ5514】Frogs（容斥原理）

    题意:n个青蛙在一个有m个节点的圆上跳,m个节点的标号为0-m-1,每只青蛙每次跳的节点数给出,让求n只青蛙所跳位置标号之和 n<=1e4,m<=1e9,a[i]<=1e9 思路:由 ...

  6. 【CF1073B】Vasya and Books（模拟）

    题意:给你一个栈里书的编号,每次能捞出栈顶的一本书,每次询问捞出某本编号的书需要捞几次 n<=2e5 思路: #include<cstdio> #include<cstring ...

  7. 冬训day3 简单数据结构

    A - 简单计算器 模拟加栈..写一写就好,从头到尾扫一遍,分两个栈存,一个存运算符,一个存中间结果,遇到乘除就先处理了,每次遇到加减就处理上一个加减的两个数,结果压进去...同时把这个运算符存进去. ...

  8. Sql常用日期格式

    原文发布时间为:2010-09-16 -- 来源于本人的百度文章 [由搬家工具导入] SQL Server中文版的默认的日期字段datetime格式是yyyy-mm-dd Thh:mm:ss.mmm ...

  9. Codeforces 935D Fafa and Ancient Alphabet

    题目链接 题意 给定两个\(n\)位的\(m\)进制数\(s1,s2\),所有出现的\(0\)均可等概率地被其他数字替换,求\(s1\gt s2\)的概率. 思路 从高位到低位,根据每一位上相应的\( ...

  10. Codeforces 475D CGCDSSQ 区间gcd值

    题目链接 题意 给定一个长度为 \(n\) 的数列 \(a_1,...,a_n\) 与 \(q\) 个询问 \(x_1,...,x_q\),对于每个 \(x_i\) 回答有多少对 \((l,r)\) ...