<!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. websocket接口测试

    1.先在jmeter的插件管理器安装webSocket的插件,WebSocket 常规选项解释如下: ip:测试服务器域名 Streaming Connection:请求之后是否保持连接,勾选之后在同 ...

  2. ECMAScript中所有参数传递的都是值，不可能通过引用传递参数

    今天在看JavaScript高级程序设计(第三版)时,看到了这个问题:ECMAScript中所有参数传递的都是值,不可能通过引用传递参数. 在我的印象中,其他语言比如Java,C++等,传递参数有两种 ...

  3. Docker学习の更改Docker的目录

    一.更改虚拟磁盘的目录 虚拟机的默认存储位置是C:\Users\Administrator\.docker\machine\machines ,后期docke镜像文件会不断增加,为了给系统盘减负,最好 ...

  4. Could not create cudnn handle: CUDNN_STATUS_INTERNAL_ERROR tensorflow-1.13.1和1.14windows版本目前不支持CUDA10.0

    报错出现 Could not create cudnn handle: CUDNN_STATUS_INTERNAL_ERROR tensorflow-1.13.1和1.14windows版本目前不支持 ...

  5. SQL一些记录

    1,2字段约束create unique index [索引名] on 软件信息表(S_SName,S_Edition)

  6. Trip

    Trip 给出一个长度为n序列\(\{a_i\}\),长度为m的序列\(\{b_i\}\),求它们的不同lcs序列按字典序输出,\(n,m\leq 80\),lcs不超过1000个,字符为26个小写字 ...

  7. 关于SecureCRT不能显示输入、换行不正常

    网上绿色破解版的SecureCRT会碰到这种问题,即输入字符不显示在终端.换行后下一行的行首有很大一段退格: 如上,输入的指令不显示:回车后下一行的起始位置不对. 碰到这种问题,在波特率.奇偶校验.停 ...

  8. 【JZOJ6360】最大菱形和(rhombus)

    description analysis 容易想到把原矩阵翻转\(45°\),然后每个数再用\(0\)隔开 然后就变成了求最大子正方形,求完二维前缀和之后就很好做了 code #pragma GCC ...

  9. VC++中的CString、char、int类型转换

    1.如何将CString类型的变量赋给char*类型的变量   方法一:GetBuffer函数  使用CString::GetBuffer函数.  char *p;  CString str=&quo ...

  10. shiro框架的组成和内部结构(下一篇为spring整合shiro)

    1.shiro简介 Apache Shiro是Java的一个安全框架.功能强大,使用简单的Java安全框架,它为开发人员提供一个直观而全面的认证,授权,加密及会话管理的解决方案. ​ 实际上,Shir ...