<!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. HDU—4046 Panda （线段树）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4046   题意:给出一个字符串,统计这个字符串任意区间中"wbw"出现的次数. 规定两 ...

  2. PE头里的东西更多。。。越看越恶心了，我都不想看了

    winnt.h 中,定义的PE头结构体 typedef struct _IMAGE_NT_HEADERS{DWORD Signature;//PE文件头标志:PE\0\0.在开始DOS header的 ...

  3. linux mysql主从复制配置

    1.设置主库master的servie-id值并且开启bin-log功能参数vi /etc/my.cnf修改my.cnf的参数:[mysqld]server-id=1 //每一个库的server-id ...

  4. 移动端dialog组件

    移动端dialog组件 dialogView是满足移动端下,用户自定义的dialog组件,API可扩展性强,使用便捷.现版本是基于jquery库编写的,在使用之前需要引入jquery库或者Zepto库 ...

  5. try-with-resources with JDBC

    I realize this was long ago answered but want to suggest an additional approach that avoids the nest ...

  6. 威布尔weibull distribution

    data = wblrnd(0.5,0.8,100,1); 生成威布尔随机函数,尺寸参数为0.5,形状参数为0.8,生成数列100行,一列: parmhat = wblfit(data) 对data的 ...

  7. vsftp 被动模式配置

    直接复制粘切过来就能用 这里只讲下配置,安装方法可以直接yum 配置文件修改 anonymous_enable=NO #关闭匿名用户 xferlog_file=/var/log/vsftpd.log ...

  8. 【JZOJ5433】图

    description 有一个n个点A+B条边的无向连通图,有一变量x,每条边的权值都是一个关于x的简单多项式,其中有A条边的权值是k+x,另外B条边的权值是k-x,如果只保留权值形如k+x的边,那么 ...

  9. npm与cnpm两者之间的区别是什么？

    NPM(节点包管理器)是节点的包管理器,用于管理节点插件(包括安装.卸载和管理依赖关系等).).NPM是一个软件包管理工具,安装在新版本的节点上,所以我们需要安装节点. NPM的常用场景(http:/ ...

  10. 阿里云代码管理平台 Teambition Codeup（行云）亮相，为企业代码安全护航

    2019杭州云栖大会企业协作与研发效能专场,企业协同平台Teambition负责人齐俊元正式发布阿里云自研的代码管理平台Teambition Codeup(行云),Codeup是一款企业级代码管理产品 ...