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,它是在运行时创建.初始化 ...
随机推荐
- js获取table checkbox选中行的值.mdjs获取table checkbox选中行的
<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jque ...
- BCZM : 1.4
书店促销活动,某套书一共有五卷.假设每一卷单独销售均需8欧元,多买则有折扣,具体折扣如下: 2 5% 3 10% 4 20% 5 25% 设计算法,计算出读者购买一批书的 ...
- leetcode-第10周双周赛-5099验证回文字符串③
题目描述: 方法:动态规划 class Solution: def isValidPalindrome(self, s: str, k: int) -> bool: def isKPalRec( ...
- curl 基础
简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种.如果熟练的话,完全可以取代 Postm ...
- C++ 字符串相互转换 适合 lua project
#include <iostream> #include <Windows.h> #include <assert.h> #define Main main voi ...
- thinkphp一键清除缓存的方法
后台控制器: <?php namespace Home\Controller; use Think\Controller; class HuancuController extends Cont ...
- 多线程--GIL锁
GIL 即全局解释器锁,是一个互斥锁,防止多个线程在同一时间执行python代码,因为在一个python进程中,不仅有主线程而且还有该主线程开启的子线程,还有解释器开启的垃圾回收机等解释器级别的线程. ...
- VMware下CentOS6.5无法连接网络
VMware下CentOS6.5无法连接网络的主要原因就是eth0文件配置了不正确的地址 正确配置方法如下: 1.确保虚拟网卡(VMware Network Adapter VMnet8)是开启的,然 ...
- spring源码读书笔记
如果我们在web项目里面使用spring的话,通常会在web.xml里面配置一个listener. <listener> <listener-class> org.spring ...
- 动态调整Log4j日志级别
log4j2.xml配置文件中支持配置monitorInterval参数,检测到配置改变后重新加载,达到动态调整日志级别的效果. 故调整日志级别无须手动重启服务. log4j2.xml配置文件示意: ...