HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>

<style>

.class1{

  background: #444;

  color: #eee;

}

.class2{

  background: red;

  color: #fff;

}

</style>

<body>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">

  <label for="r1">黑色背景</label><input type="checkbox" v-model="class1" id="r1">

  <label for="r2">红色背景</label><input type="checkbox" v-model="class2" id="r2">

    <br><br>

  <div v-bind:class="{'class1': class1}">

    directiva v-bind:class

  </div>

<div v-bind:class="{'class2': class2}">

    directiva v-bind:class

  </div>

</div>

<script>

new Vue({

    el: '#app',

  data:{

      class1: true,

      class2: true

  }

});

</script>

</body>

</html>

实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类.

效果：

VueJS样式绑定:v-bind的更多相关文章

  1. VueJS样式绑定v-bind:class

    class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...

  2. vuejs样式绑定

    第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> ...

  3. VueJS样式绑定之内联样式v-bind:style

    我们可以在 v-bind:style 直接设置样式: 直接添加样式属性 HTML <!DOCTYPE html> <html> <head> <meta ch ...

  4. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  5. 2019-3-16-win10-uwp-在-ItemsPanelTemplate-里面通过样式绑定-Orientation-显示方向

    title author date CreateTime categories win10 uwp 在 ItemsPanelTemplate 里面通过样式绑定 Orientation 显示方向 lin ...

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

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

  7. 【WIN10】绑定x:Bind

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

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

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

  9. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

随机推荐

  1. 解决面试问题中的top k问题 Leetcode

    https://leetcode.com/problems/kth-largest-element-in-an-array/ 使用堆,堆插入一个数据是logk,删除一个数据是logk,复杂度为logk ...

  2. oracle列转行 WM_CONCAT LISTAGG

    开发给个SQL说给某个条件时报ORA-22922 代码段: SELECT 袋号, SUM(实际重量) AS 实际重量, SUM(材积重量) AS 材积重量, COUNT(运单号) AS 件数, TO_ ...

  3. 【图文】 使用ant编译和发布java项目

        开发JavaEE项目经常会碰到修改代码后,项目没有重新编译的问题.老大给指明了一个解决办法:用ant编译项目. ant是apache基金会下的一个项目,是基于Java语言的构建工具.      ...

  4. 项目记事【SpringMVC-2】：将后台的对象，转成JSON报文

    Spring版本:3.2.7 Jackson版本: <!--Jackson --> <dependency> <groupId>com.fasterxml.jack ...

  5. 【Luogu】P2569股票交易（单调队列优化DP）

    题目链接 首先这题可以肯定的是朴素DP秒出.然后单调队列优化因为没接触过所以不会emmm 而且脑补没补出来 坐等四月省选倒数第一emmm 心态爆炸,偷懒放题解链接 #include<cstdio ...

  6. POJ——1195Mobile phones（二维树状数组点修改矩阵查询）

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 17764   Accepted: 8213 De ...

  7. HUST——1110雪碧（简单DFS）

    1110: 雪碧 时间限制: 1 Sec  内存限制: 128 MB 提交: 18  解决: 6 题目描述 杨神最近特别喜雪碧,他现在有两瓶,他大晚上的在街上走,他逢店加一倍(雪碧),逢摊吃大虾并喝一 ...

  8. 我要好offer之 网络大总结

    1. TCP协议的状态机 TCP一共定义了11种状态,这些状态可以使用 netstat 命令查看 @左耳朵耗子 tcp系列教程: 上篇 下篇 2. TCP建立连接3次握手.释放连接4次握手 TCP包头 ...

  9. 古代猪文 BZOJ 1951

    古代猪文 [问题描述] “在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心……” ——选自猪王国民歌 很久很久以前,在山的那边 ...

  10. 转 Python爬虫实战二之爬取百度贴吧帖子

    静觅 » Python爬虫实战二之爬取百度贴吧帖子 大家好,上次我们实验了爬取了糗事百科的段子,那么这次我们来尝试一下爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 本篇目标 ...