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. WIN下C开发环境搭建

    安装编译器 MinGW提供了一套简单方便的Winodows下的基于GCC程序开发环境 官网下载安装 http://www.mingw.org/ 打开后选择basic setup的package Ins ...

  2. centos中代理的设置

    最近在校园网中使用一个centos的主机,链接网络是需要代理的,如果是windows主机在Internet选项里设置一下就可以,可是在linux这个任何配置都要更改配置文件的系统里我还真是纠结了好大一 ...

  3. css3制作扇形菜单

    工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-tran ...

  4. git统计日期之间的代码改动行数

    git log --pretty=tformat: --since ==2016-10-25 --until=2016-10-27   --numstat | awk '{ add += $1 ; s ...

  5. foj Problem 2283 Tic-Tac-Toe

                                                                                                    Prob ...

  6. 【CF1017B】The Bits（模拟）

    题意:给定两个二进制数字a,b,可以任意交换a中的两个bit位,求进行这样一次操作,最多可产生多少种不同的a or b n<=1e5 思路:模拟,分类讨论 #include<cstdio& ...

  7. JS和CS互访【后台前台代码调用JavaScript变量以及JavaScript调用代码变量】

    原文发布时间为:2008-10-13 -- 来源于本人的百度文章 [由搬家工具导入] .如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问Ja ...

  8. 16深入理解C指针之---迷途指针

    一.若程序中存在迷途指针,轻则导致程序退出,重则使程序出现重大逻辑错误 1.定义:内存已释放,指针依旧指向原始内存,这种指针就是迷途指针 2.迷途指针和指针别名: 1).指针依旧指向已释放的内存,无法 ...

  9. 過充保護警告訊息 over charging protection，Battery over voltage protection， warning message

    Definition: over charging protection.battery over voltage protection, 是一種 battery 保護機制, 避免 battery 充 ...

  10. Linux 之 文件搜索命令

    文件搜索命令 参考教程:[千峰教育] 文件搜索定位 grep: 作用:通用规则表达式分析程序,是一种强大的文本搜索工具, 它能使用正则表达式搜索文本,并把匹配的行打印出来. 格式:grep [选项] ...