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. iOS-----openGL--openGL ES iOS 入门篇2--->绘制一个多边形

    在上一篇我们学习了如何搭建IOS下openGL的开发环境,接下来我们来学习如何绘制一个多边形. 在2.0之前,es的渲染采用的是固定管线,何为固定管线,就是一套固定的模板流程,局部坐标变换 -> ...

  2. Welcome-to-Swift-15反初始化（Deinitialization）

    在一个类的实例被释放之前,反初始化函数被立即调用.用关键字deinit来标示反初始化函数,类似于初始化函数用init来标示.反初始化函数只适用于类类型. 反初始化原理 Swift会自动释放不再需要的实 ...

  3. 【Luogu】P2607骑士（基环树DP）

    题目链接 这题……好吧我比着题解打的 题解连接 #include<cstring> #include<cstdio> #include<cstdlib> #incl ...

  4. Linux--内核Uevent事件机制 与 Input子系统【转】

    转自:http://blog.csdn.net/lxl584685501/article/details/46379453 [-] 一Uevent机制 Uevent在kernel中的位置 Uevent ...

  5. C# DataSet与DataTable的区别和用法

    DataSet是数据集,DataTable是数据表,DataSet存储多个DataTable.DataSet和DataTable像是专门存储数据的一个容器,在你查询数据库得到一些结果时可以存在里面. ...

  6. UICollectionView的cell创建直接从第三个数据开始问题

    实现的效果是这样 大概意思就是第一组没有数据就直接将改组的cell高度变成0效果实现了,但是第二组数据创建cell就出问题了--奇葩问题 * 代码问题在这```-(CGSize)collectionV ...

  7. TF-IDF 学习

    参考资料, 阮一峰的博客  http://www.ruanyifeng.com/blog/2013/03/tf-idf.html 非常感谢他, 能用如此通俗易懂的文字来阐述概念 TF -- Term ...

  8. babel6的babel-plugin-add-module-exports插件

    干什么的 在 babel 5 时代, export default {}; 除了会被转译成 exports.default = {};,还会加一句 module.exports = exports.d ...

  9. Codeforces Gym101606 I.I Work All Day (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    I I Work All Day 这个题就是取模找最小的. 代码: 1 #include<iostream> 2 #include<cstdio> 3 #include< ...

  10. 串口VMIN VTIME 详解

    原文地址: 以前跟着做过VxWorks的开发,主要通信方式是串口,因为底层BSP包已经做好了,串口通信非常简单.后来接触Linux,在一块OK6410上跑Linux串口通信,才发现原来天真的以为甚是简 ...