绑定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 ...
随机推荐
- leetcode 125 验证回文字符串 Valid Palindrome
验证回文字符串 C++ 思路就是先重新定义一个string ,先遍历第一遍,字符串统一小写,去除空格:然后遍历第二遍,首尾一一对应比较:时间复杂度O(n+n/2),空间O(n); class Solu ...
- RotateZoom.cpp——Inter
// RotateZoom.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...
- Openstack 实现技术分解 (2) 虚拟机初始化工具 — Cloud-Init & metadata & userdata
目录 目录 前文列表 扩展阅读 系统环境 前言 Cloud-init Cloud-init 的配置文件 metadata userdata metadata 和 userdata 的区别 metada ...
- drop() delete() remove()函数
drop()函数 1 删除前务必指定columns或index,避免出错. import pandas as pd df = pd.DataFrame({'a':[1,2,3], 'b':[3,4,5 ...
- 用U盘完成win10系统的安装
电脑太卡了,每次都要重装,然后每次忘记要从哪里开始动手,都要百度,仅以此篇记录下 目录 1.系统盘准备 2.从U盘启动安装 1.系统盘准备 第一步:在电脑中完成系统盘制作工具的安装,由于它是要依赖.n ...
- 【Spring】---【AOP】
转发几篇文章 专治不会看源码的毛病--spring源码解析AOP篇 Spring3:AOP 理解AOP 什么是AOP? 转自: http://www.cnblogs.com/xiexj/p/73668 ...
- 【MM系列】SAP MM模块-BOM展开函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BOM展开函数 ...
- 【ABAP系列】SAP 系统的消息类型分析 MESSAGE TYPE
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 系统的消息类型分析 ME ...
- 学习使用CGI和HTML
目标和需求: (1)通过网页查询并设置开发板的网络参数,要求至少可查询IP地址.子网掩码.网关.MAC地址,可设置自动获取IP或固定IP,设置包括查询的内容 (2)使用CGI编程+HTML实现简单数据 ...
- python 并发编程 查看进程的id pid与父进程id ppid
查看进程id pid 不需要传参数 from multiprocessing import Process import time import os def task(): print(" ...