绑定class -vue
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的更多相关文章
- 自己实现一个双向绑定的Vue
我们知道双向绑定是Vue的核心之一,接下来我们自己仿照Vue实现一个基本的功能. 项目代码在GitHub上: https://github.com/zhangKunUserGit/zk-vue
- contenteditable联合v-html实现数据双向绑定的vue组件
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图: (1)上面看似文本域的大框是通过给div ...
- 开发环境绑定host vue 返回 invalid host header
事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...
- 百度统计微信网站绑定(vue项目)
*网站域名:----- *网站首页:----/index.html 下列代码放入index.html vue加百度统计代码(亲测有效)
- 动态class,style,src绑定写法 vue
:class="{active:menuName===item.title}" :style="thisTitle==='一张图展示'?styles:''" : ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 从Object.definedProperty中看vue的双向数据的绑定
前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...
- 简简单单的Vue1(MVVM与Vue的双向绑定原理)
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 Vue 在此之前的文章我们讲述了前端开发的工具,语言的知识,接下来我们从头开始学习一个 ...
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
随机推荐
- c++11多线程---std::ref和std::cref
std::ref和std::cref 解释 std::ref 用于包装按引用传递的值. std::cref 用于包装按const引用传递的值. 为什么需要std::ref和std::cref ...
- 阶段3 1.Mybatis_12.Mybatis注解开发_6 mybatis注解开发一对一的查询配置
新建Account实体类 生成getter和setter还有toString方法 先创建dao类 全局的配置,这里要改成package 创建多对一的关系 在查询的时候输出user这个对象的内容 建立查 ...
- log() exp()函数
1 对数函数表示法 import numpy as np import math print('输出自然底数e:',math.e) # np表示法 # np.log()是以e为底的自然对数 print ...
- Workflow License invalid!!
2019/08/23-17:02:16 >> INFO >> main >> org.hibernate.cfg.HbmBinder.bindRootPersist ...
- Dubbo分布式服务框架入门(附工程)
要想了解Dubbo是什么,我们不防先了解它有什么用. 使用场景:比如我想开发一个网上商城项目,这个网上商城呢,比较复杂,分为pc端web管理后台,微信端销售公众号,那么我们分成四个项目,pc端网站,微 ...
- charles抓包教程
百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...
- 14.使用Crunch创建字典----Armitage扫描和利用----设置虚拟渗透测试实验室----proxychains最大匿名
使用Crunch创建字典 kali自带的字典 usr/share/wordlists cd Desktop mkdir wordlists cd wordlists/ crunch --help cr ...
- java 对象 json 集合 数组 互转
1.先定义一个类对象 package com.basics; import com.alibaba.fastjson.JSONObject; import java.util.List; import ...
- [转帖]深入理解 MySQL—锁、事务与并发控制
深入理解 MySQL—锁.事务与并发控制 http://www.itpub.net/2019/04/28/1723/ 跟oracle也类似 其实所有的数据库都有相同的机制.. 学习了机制才能够更好的工 ...
- PHP7中的数据类型(一)计数引用、写时复制,可垃圾回收
列个简单的表格说明一下: