<!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的更多相关文章

  1. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  2. 【WIN10】绑定x:Bind

    在WP8.WP8中,我们知道有一个绑定{Binding},而在Win10中,新增了一个绑定{x:Bind} x:Bind :为编译时绑定 ,内存.内存相对于传统绑定都有优化 特性: 1.为强类型    ...

  3. 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...

  4. Docker 基础知识 - 使用绑定挂载(bind mounts)管理应用程序数据

    绑定挂载(bind mounts)在 Docker 的早期就已经出现了.与卷相比,绑定挂载的功能有限.当您使用绑定挂载时,主机上的文件或目录将挂载到容器中.文件或目录由其在主机上的完整或相对路径引用. ...

  5. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  6. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  7. jQuery事件绑定方法bind、 live、delegate和on的区别

    我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...

  8. 事件绑定之.bind()

    .bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...

  9. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  10. UWP: 掌握编译型绑定 x:Bind

    在 UWP 开发中,我们在进行数据绑定时,除了可以使用传统的绑定 Binding,也可以使用全新的 x:Bind,由于后者是在程序编译时进行初始化操作(不同于 Binding,它是在运行时创建.初始化 ...

随机推荐

  1. Spring MVC @CookieValue注解（5）

    @CookieValue的作用 用来获取Cookie中的值 @CookieValue参数 1.value:参数名称 2.required:是否必须 3.defaultValue:默认值 @Cookie ...

  2. Window下，前后端分离项目，登录权限验证中的，Redis相关操作

    [1]官网下载Redis(解压版) https://redis.io/download [2]切换到目录下打开DOS,执行指令启动Redis redis-server.exe redis.window ...

  3. Got permission denied while trying to connect to the Docker daemon

    答案:https://stackoverflow.com/questions/48568172/docker-sock-permission-denied

  4. Android 开发 框架系列 OkHttp文件下载功能实现（含断点续传）

    前言 此篇博客只是下载功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...

  5. java字符串简单介绍

    String:String对象初始化之后不可变线程安全简单的字符串操作使用String效率更高 StringBuffer:StringBuffer对象初始化之后可改变线程安全频繁的字符串操作可以使用S ...

  6. postman连接不了localhost问题解决

    学习搭建服务器可用postman 连接不了localhost的端口 网上好多教程是这样连接 看完视频后我们是这样 找了大量资料都解决不了,什么版本,什么证书的都不好使,最简单的就是去掉http:// ...

  7. canvas基础用法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. thinkphp rabc权限总结

    今天晚上把ThinkPHP的权限分配弄明白了,心里的包袱立刻放下了,感觉那个爽啊!稍微记录一下. 背景:CMS系统开发(17do). 项目分组:Admin(后台管理).Home(前台显示). Admi ...

  9. Java 异常基本结构

    异常的定义:阻止当前方法或作用域继续执行的情况,即程序无法正常执行下去称之为异常. 异常的基本结构: 所有不正常的类都继承与Throwable类,包括Error类和Exception类 Error一般 ...

  10. HDU5377

    题意:给sum,m组询问,每组x,y求\(x^t=y\mod p,p|sum\),p是素数,求最小的t 题解:先处理sum的所有质因子p,求出p的原根rt,\(rt^a=x\mod p,rt^b=y\ ...