Class绑定v-bind:class
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head> <body>
<div id="myApp">
<div v-bind:class="{active:isActive}">红色文本1</div>
<div :class="{active:isActive}">红色文本2</div>
<button @click="btnClick">改变class吧</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
isActive: true,
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
},
},
});
</script>
</body> </html>
Class绑定v-bind:class的更多相关文章
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 【WIN10】绑定x:Bind
在WP8.WP8中,我们知道有一个绑定{Binding},而在Win10中,新增了一个绑定{x:Bind} x:Bind :为编译时绑定 ,内存.内存相对于传统绑定都有优化 特性: 1.为强类型 ...
- 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
- Docker 基础知识 - 使用绑定挂载(bind mounts)管理应用程序数据
绑定挂载(bind mounts)在 Docker 的早期就已经出现了.与卷相比,绑定挂载的功能有限.当您使用绑定挂载时,主机上的文件或目录将挂载到容器中.文件或目录由其在主机上的完整或相对路径引用. ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
- jQuery事件绑定方法bind、 live、delegate和on的区别
我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...
- 事件绑定之.bind()
.bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...
- jQuery中绑定事件bind() on() live() one()的异同
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...
- UWP: 掌握编译型绑定 x:Bind
在 UWP 开发中,我们在进行数据绑定时,除了可以使用传统的绑定 Binding,也可以使用全新的 x:Bind,由于后者是在程序编译时进行初始化操作(不同于 Binding,它是在运行时创建.初始化 ...
随机推荐
- 第一周课堂笔记1th
1. 计算机基本组成 CPU:中央处理器,人的大脑 内存:临时存储数据 (特点:断电即消失,容量小12G 24G) 硬盘:永久存储数据(特点:断电不消失容量大,500G 1T) ...
- 大道浮屠诀---cwRsync同步工具的使用
目的: 在日常生活中,我们有时候会遇到这样类似的问题 ---需要把一台服务器上的某个重要的文件进行备份(拷贝另外的服务器上) ---需要同步系统上的配置文件到其他系统 利用此cwRsync软件可以解决 ...
- 原来腾迅的QQ号竟然是个int变量
今天有个人加我好友,我一点开申请界面 我惊异了.... 我擦,号码竟然是个负数,但是人物资料里面却是个正数 有编程经验的人,一眼就看得出来原因.而且一眼就看得出来,它们是什么 1857918296 + ...
- C puts，gets
1. char *gets(char *s); 从输入缓冲区中读取一个字符串存储到字符指针变量 str 所指向的内存空间 注意事项:空间不检查合理:要使用功能必须准备足够大的空间: #include ...
- 随笔记录 grub引导故障修复 2019.8.7
系统备份: [root@localhost ~]# mkdir /abc [root@localhost ~]# mount /dev/sdb1 /abc [root@localhost ~]# dd ...
- element-ui表格点击一行展开
转载:https://www.cnblogs.com/xiaochongchong/p/8127282.html <template> <el-table :data="t ...
- 前端常用的库和实用技术之JavaScript多线程
多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...
- Java 多线程 - 创建线程的方法 + Executors.newXXXThreadPool()缺点
java中创建线程的三种方法以及区别: https://www.cnblogs.com/3s540/p/7172146.html 通过Executor 的工具类,创建三种类型的普通线程池: https ...
- Windows route
ROUTE [-f] [-p] [-4|-6] command [destination] [MASK netmask] [gateway] [METRIC met ...
- (转)iframe 高度100%时，出现垂直滚动条
问题 需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding.margin的因素外,还是有滚动 ...