1、值为对象

:class = "{ 'text-red': isActive }"
data () {
return {
isActive : true
}
}
:class = "color"
data () {
return {
  color: {
  'text-red': true
  }
}
}
:class = "color"
computed: {
color: function () {
return {
'text-red' : true
}
}
}

2、值为数组

:class = "[color1, color2]"
data (){
return {
color1: "text-red",
color2: "text-green"
}
}
:class="[isActive ? activeCls : '',errorCls]"
data (){
return {
isActive:true,
atvieCls:'active',
errorCls:'error'
}
}
:class="[{'active':isActive},errorCls]"
data () {
return {
isActive:true,
errorCls:'error'
}
}

绑定class -vue的更多相关文章

  1. 自己实现一个双向绑定的Vue

    我们知道双向绑定是Vue的核心之一,接下来我们自己仿照Vue实现一个基本的功能. 项目代码在GitHub上: https://github.com/zhangKunUserGit/zk-vue

  2. contenteditable联合v-html实现数据双向绑定的vue组件

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图: (1)上面看似文本域的大框是通过给div ...

  3. 开发环境绑定host vue 返回 invalid host header

    事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...

  4. 百度统计微信网站绑定(vue项目)

    *网站域名:----- *网站首页:----/index.html 下列代码放入index.html vue加百度统计代码(亲测有效)

  5. 动态class,style,src绑定写法 vue

    :class="{active:menuName===item.title}" :style="thisTitle==='一张图展示'?styles:''" : ...

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

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  7. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  8. 简简单单的Vue1(MVVM与Vue的双向绑定原理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 Vue 在此之前的文章我们讲述了前端开发的工具,语言的知识,接下来我们从头开始学习一个 ...

  9. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

随机推荐

  1. leetcode 125 验证回文字符串 Valid Palindrome

    验证回文字符串 C++ 思路就是先重新定义一个string ,先遍历第一遍,字符串统一小写,去除空格:然后遍历第二遍,首尾一一对应比较:时间复杂度O(n+n/2),空间O(n); class Solu ...

  2. RotateZoom.cpp——Inter

    // RotateZoom.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  3. Openstack 实现技术分解 (2) 虚拟机初始化工具 — Cloud-Init & metadata & userdata

    目录 目录 前文列表 扩展阅读 系统环境 前言 Cloud-init Cloud-init 的配置文件 metadata userdata metadata 和 userdata 的区别 metada ...

  4. drop() delete() remove()函数

    drop()函数 1 删除前务必指定columns或index,避免出错. import pandas as pd df = pd.DataFrame({'a':[1,2,3], 'b':[3,4,5 ...

  5. 用U盘完成win10系统的安装

    电脑太卡了,每次都要重装,然后每次忘记要从哪里开始动手,都要百度,仅以此篇记录下 目录 1.系统盘准备 2.从U盘启动安装 1.系统盘准备 第一步:在电脑中完成系统盘制作工具的安装,由于它是要依赖.n ...

  6. 【Spring】---【AOP】

    转发几篇文章 专治不会看源码的毛病--spring源码解析AOP篇 Spring3:AOP 理解AOP 什么是AOP? 转自: http://www.cnblogs.com/xiexj/p/73668 ...

  7. 【MM系列】SAP MM模块-BOM展开函数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BOM展开函数   ...

  8. 【ABAP系列】SAP 系统的消息类型分析 MESSAGE TYPE

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 系统的消息类型分析 ME ...

  9. 学习使用CGI和HTML

    目标和需求: (1)通过网页查询并设置开发板的网络参数,要求至少可查询IP地址.子网掩码.网关.MAC地址,可设置自动获取IP或固定IP,设置包括查询的内容 (2)使用CGI编程+HTML实现简单数据 ...

  10. python 并发编程 查看进程的id pid与父进程id ppid

    查看进程id pid 不需要传参数 from multiprocessing import Process import time import os def task(): print(" ...