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和一个对象的形式来解 ...
随机推荐
- 爬虫Scrapy框架-Crawlspider链接提取器与规则解析器
Crawlspider 一:Crawlspider简介 CrawlSpider其实是Spider的一个子类,除了继承到Spider的特性和功能外,还派生除了其自己独有的更加强大的特性和功能.其中最显著 ...
- NOJ——1508火烧赤壁2(并查集+启发式合并+逆序加边)
[1508] 火烧赤壁2 时间限制: 1000 ms 内存限制: 65535 K 问题描述 上次出了一道火烧赤壁的题目给当时的新生,也就是你们的上一届学长们做,那么这次,我又想到了另一个想法. 上次的 ...
- 刷题总结——开车旅行(NOIP2012 set+倍增)
题目: 题目描述 小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 i 的海拔高度为Hi,城 ...
- docker (centOS 7) 使用笔记4 - etcd服务
本次测试的系统包含centos 7.2 64 bit,centos 7.3 64 bit 1. 安装 yum -y install etcd 2. 配置 此处一共准备了3台机器(10.10.10.10 ...
- jsp实现文件下载,out = pageContext.pushBody();out.close();不用写到jsp中
测试jsp: <%@ page contentType="text/html; charset=gbk" %> <% try{ com.enfo.intrust. ...
- 关于ubuntu的对拍
感谢夏天dl的blog,写的十分清楚,但是本人对于ubuntu十分不熟悉 所以不怎么会使用. 对拍的可执行文件是sh,就是bash语言 #!bin/bash while true; do ./date ...
- python 命令行传入参数
创建 test.py 文件,代码如下: #!/usr/bin/python # -*- coding: gbk -*- import sys print sys.argv if __name__==' ...
- 转 Python爬虫入门四之Urllib库的高级用法
静觅 » Python爬虫入门四之Urllib库的高级用法 1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我 ...
- 从网上搜集的X86 显示 int 10H
INT 10H 是由 BIOS 对屏幕及显示器所提供的服务程序,而后倚天公司针对倚天中文提供了许多服务程序,这些服务程序也加挂在 INT 10H 内.使用 INT 10H 中断服务程序时,先指定 AH ...
- 電池的標稱電壓 與 power consumption 量測
電池標稱電壓 定義如下圖, 以25度為例,20度再往上點, 4V 放一下電就往下掉, 3V 放一下電就往下掉, 假設 3.8V 是擁有最多 capacity 可以 discharge 的電壓,放電放了 ...