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. [python IO学习篇] 补充.py文件是中文, .ini文件内容是中文

    python 代码文件的编码.py文件默认是ASCII编码,中文在显示时会做一个ASCII到系统默认编码的转换,这时就会出错:SyntaxError: Non-ASCII character.需要在代 ...

  2. google chrome & preferences & languages

    google chrome & preferences & languages language settings https://www.google.com/preferences ...

  3. 【bzoj3166】[Heoi2013]Alo 可持久化Trie树+STL-set

    题目描述 Welcome to ALO ( Arithmetic and Logistic Online).这是一个VR MMORPG ,如名字所见,到处充满了数学的谜题.现在你拥有n颗宝石,每颗宝石 ...

  4. HDU——2067小兔的棋盘（卡特兰数&递推DP）

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  5. 5whys分析法在美团工程师中的实践

    转载美团博客:https://tech.meituan.com/5whys-method.html 前言 网站的质量和稳定性对于用户和公司来说至关重要,但是在网站的快速发展过程中,由于各种原因导致事故 ...

  6. bzoj 2801 [Poi2012]Minimalist Security 设一个，求出所有

    题目大意 给出一个N个顶点.M条边的无向图,边(u,v)有权值w(u,v),顶点i也有权值p(i), 并且对于每条边(u,v)都满足p(u)+p(v)>=w(u,v). 现在要将顶点i的权值减去 ...

  7. 【NOIP2016练习】T2 旅行（树形DP，换根）

    题意:小C上周末和他可爱的同学小A一起去X湖玩. X湖景区一共有n个景点,这些景点由n-1条观光道连接着,从每个景点开始都可以通过观光道直接或间接地走到其他所有的景点.小C带着小A从1号景点开始游玩. ...

  8. 关于C++的new是否会对内存初始化的问题

    先把结论放上来: C++在new时的初始化的规律可能为:对于有构造函数的类,不论有没有括号,都用构造函数进行初始化:如果没有构造函数,则不加括号的new只分配内存空间,不进行内存的初始化,而加了括号的 ...

  9. 反汇编->C++内联

    C/C++提供了内联函数机制 内联函数就是向编译器建议:编译这个函数的时候.直接把函数展开,而不是进行函数调用call.当然编译器并不接受这个建议.仍然把他当做普通函数进行编译 使用内联函数的优点:减 ...

  10. 搭建redis集群时所遇问题及解决方法

    单独一台虚拟机(系统CentOS 7) 问题1 创建redis集群环境时,输入以下命令 [root@localhost redis-cluster]# ./redis-trib.rb create - ...