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. win8中写好的程序，在win7中没办法运行

     没有安装相应版本的,net framework win8自带4.0 win7自带2.0 所以4.0及其以上的程序在win7跑必须安装4.0及其以上版本的framework

  2. mysql 修改密码 开启远程访问权限

    修改密码 update user set password=password('') where user='root'; FLUSH   PRIVILEGES; 远程访问权限: GRANT ALL ...

  3. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  4. vue-cli 脚手架分析

    Vue-cli 一.安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装.你可以在命令行工具里输入npm -v  检测你是否安装了npm和 ...

  5. h5 video切换到横屏全屏

    将video设置为屏幕大小,覆盖其他元素,想到这种操作我也是震惊的 function() { let startIcon = document.getElementById('start-icon') ...

  6. 【14】vuex2.0 之 mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  7. tableView镶嵌加入CollectionView实现方法

    创建一个继承UICollectionView的类QHCollectionView在QHCollectionView.h中添加接口方法 @interface QHCollectionView : UIC ...

  8. Static 静态内部类

    Java中的类可以是static吗?答案是可以.在java中我们可以有静态实例变量.静态方法.静态块.类也可以是静态的. java允许我们在一个类里面定义静态类.比如内部类(nested class) ...

  9. BZOJ【1625】宝石手镯

    1625: [Usaco2007 Dec]宝石手镯 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1007  Solved: 684[Submit][St ...

  10. duilib入门简明教程 -- 自绘标题栏(5) （转）

    原文转自 http://www.cnblogs.com/Alberl/p/3343667.html         如果大家有做过标题栏的自绘,肯定会感慨各种不容易,并且现有的一些资料虽然完美的实现了 ...