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. 安装配置apache sentry服务

    环境 系统环境:Centos6.7 Hadoop版本:CDH5.10 jdk版本:jdk7 注:本文并未集成kerberos组件 安装Sentry Server 选择安装hive的节点进行安装测试: ...

  2. NetScaler通过DHCP服务器获取IP地址

    NetScaler通过DHCP服务器获取IP地址 DHCP 选项参考 https://www.iana.org/assignments/bootp-dhcp-parameters/bootp-dhcp ...

  3. BZOJ4737 组合数问题 【Lucas定理 + 数位dp】

    题目 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3)三个物品中选择两个物品可以有( 1,2),(1,3),(2,3)这三种选择方法.根据组合数的定义,我们可以给 ...

  4. Codeforces Round #281 (Div. 2) A 模拟

    A. Vasya and Football time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  5. git下载其他人分支的代码

    1. 在工作空间,右键,打开Git Bash 2. clone主分支的代码(即下载主分支代码的过程) 执行命令: git clone xxx.git 3. 进入工程目录 cd   xxx 4. 切换到 ...

  6. springboot开启定时任务 添加定时任务 推送

    最近在自学Java的springboot框架,要用到定时推送消息.参考了网上的教程,自己调试,终于调好了.下面将网上的教程归纳下,总结复习下.  springboot开启定时任务  在SpringBo ...

  7. ckeditor编辑的使用方法

    一.下载安装Ckeditor,并将其整合到项目中 1.什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式.大小.颜色并具备插入图片的功能.而 ...

  8. error LNK2001: unresolved external symbol __imp__WSAStartup@8 SOCKET（转）

    VC6.0下的错误信息: error LNK2001: unresolved external symbol __imp__socket@12 error LNK2001: unresolved ex ...

  9. Cryptography I 学习笔记 --- 基于陷门置换的公钥加密

    RSA算法的工作流程 1. 生成公钥私钥 生成两个素数p和q,计算n=p*q,计算φ(n)=n-p-q+1,然后生成e与d,使 e * d = 1 mod φ(n). 然后以(n, e)作为公钥,(n ...

  10. Wordpress笔记：背景音乐

    想要在blog首页加上自动播放的背景音乐,能找到的插件与方法基本上都是讲在文章里添加的.侧边栏里添加文本的方法也总有美观等等这样那样的问题,折腾了几种之后终于搞定了.用的是Audio player插件 ...