VueJS样式绑定:v-bind
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的更多相关文章
- VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...
- vuejs样式绑定
第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> ...
- VueJS样式绑定之内联样式v-bind:style
我们可以在 v-bind:style 直接设置样式: 直接添加样式属性 HTML <!DOCTYPE html> <html> <head> <meta ch ...
- wpf样式绑定 行为绑定 事件关联 路由事件实例
代码说明:我要实现一个这样的功能 有三个window窗口 每个窗体有一个label标签 当我修改三个label标签中任意一个字体颜色的时候 其他的label标签字体颜色也变化 首先三个窗体不用 ...
- 2019-3-16-win10-uwp-在-ItemsPanelTemplate-里面通过样式绑定-Orientation-显示方向
title author date CreateTime categories win10 uwp 在 ItemsPanelTemplate 里面通过样式绑定 Orientation 显示方向 lin ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 【WIN10】绑定x:Bind
在WP8.WP8中,我们知道有一个绑定{Binding},而在Win10中,新增了一个绑定{x:Bind} x:Bind :为编译时绑定 ,内存.内存相对于传统绑定都有优化 特性: 1.为强类型 ...
- 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
随机推荐
- Python封装与隐藏
今日内容: 1.封装与隐藏2.property3.绑定方法与非绑定方法 知识点一:封装与隐藏 1.什么封装: 封:属性对外是隐藏的,但对内是开放的 装:申请一个名称空间,往里装入一系列名字 ...
- spring AOP详解〇
AOP正在成为软件开发的下一个圣杯.使用AOP,你可以将处理aspect的代码注入主程序,通常主程序的主要目的并不在于处理这些aspect.AOP可以防止代码混乱. 为了理解AOP如何做到这点,考虑一 ...
- iOS开发笔记--UILabel的相关属性设置
在iOS编程中UILabel是一个常用的控件,下面分享一下UILabel的相关属性设置的方法. 很多学习iOS6编程都是从storyboard开始,用到UILabel时是将控件拖到storyboard ...
- [POJ3974]Palindrome(后缀数组 || manacher)
传送门 求一个串的最长回文子串的长度 1.后缀数组 把这个串反转后接到原串的后面,中间连一个没有出现过的字符. 然后求这个新字符串的某两个后缀的公共前缀的最大值即可. ——代码 #include &l ...
- [暑假集训--数位dp]hdu3555 Bomb
The counter-terrorists found a time bomb in the dust. But this time the terrorists improve on the ti ...
- Linux System Programming 学习笔记(九) 内存管理
1. 进程地址空间 Linux中,进程并不是直接操作物理内存地址,而是每个进程关联一个虚拟地址空间 内存页是memory management unit (MMU) 可以管理的最小地址单元 机器的体系 ...
- ng-include
ng-include可以作为标签或者属性来使用,作用是引入公用文件. <div ng-include="'header.html'"></div> 注意里面 ...
- strace工具的实现原理【转】
转自:http://blog.csdn.net/jasonchen_gbd/article/details/44044539 版权声明:本文为博主原创文章,转载请附上原博链接. 目录(?)[-] ...
- fuelgauge
void fg_init(void *queue, void (*bs_fuel_gauge_status)(void)) { fg_init_ready = bs_fuel_gauge_status ...
- delphi中关于时间差的实例
http://www.cnblogs.com/rogee/archive/2010/09/20/1832035.html 很多时候要用到相差多少天,多少周,多少秒,查了一下资料,整理如下: 首先 us ...