Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
<style type="text/css">
.active {
width: 64px;
height: 64px;
background: blue;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app-1">
<div v-bind:class="{ active: isActive, textDanger: hasError }"></div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
isActive: true,
hasError: false
}
})
</script>
</body>
</html>
最基础样式绑定，是否使用样式由后面的布尔值决定
也可以绑定一个对象，这样看起来代码更清爽一些
<div id="app-2">
<div v-bind:class="classObject"></div>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#app-2',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
</script>
这两段代码中有个地方要特别注意一下，Bootstrap的text-danger属性分别使用了textDanger（驼峰式）和text-danger（串联式）的写法，这2种写法Vue都是支持的，唯一要注意的是使用串联式要加单引号
例如：font-size属性，在Vue里面可以写成fontSize（驼峰式）或'font-size'（串联式）
Class绑定的数组语法
<div id="app-3">
<!-- 可以用三元表达式来选择性的渲染 -->
<div v-bind:class="[activeClass, hasError ? errorClass : '']"></div>
<!-- 也可以在数组语法中使用对象语法 -->
<div v-bind:class="[activeClass, { errorClass: hasError }]"></div>
</div>
<script type="text/javascript">
var vm3 = new Vue({
el: '#app-3',
data: {
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
内联绑定的对象语法
<div id="app-4">
<div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px' }">双子宫殿</div>
</div>
<script type="text/javascript">
var vm4 = new Vue({
el: '#app-4',
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
同样内联绑定也可以绑定一个对象
<div id="app-5">
<div v-bind:style="styleObject">Hello, TanSea!</div>
</div>
<script type="text/javascript">
var vm5 = new Vue({
el: '#app-5',
data: {
styleObject: {
color: 'green',
fontSize: '20px'
}
}
})
</script>
内联绑定的数组语法
<div id="app-6">
<div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div>
</div>
<script type="text/javascript">
var vm6 = new Vue({
el: '#app-6',
data: {
baseStyles: {
color: 'blue',
fontSize: '30px'
},
overridingStyles: {
fontFamily: '微软雅黑'
}
}
})
</script>
总体来说，样式绑定相对来说是比较简单的，只要记住语法格式就行了
Vue.js学习笔记 第二篇 样式绑定的更多相关文章
- Vue.js学习 Item6 -- Class 与 样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此 ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
- js学习笔记第二篇
Js笔记整理 1.StringAPI a) 大小写转换:str.toUpperCase();str.toLowerCase(); b) 获取指定位置字符: Str[i]-- ...
- vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数 定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 before ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js 学习笔记 第4章 v-bind 及 class与style绑定
本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...
- Vue.js——学习笔记
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
随机推荐
- POJ 3480 & HDU 1907 John（尼姆博弈变形）
题目链接: PKU:http://poj.org/problem? id=3480 HDU:http://acm.hdu.edu.cn/showproblem.php? pid=1907 Descri ...
- 微信小程序 快键键
快捷键 格式调整 - Ctrl+S:保存文件 - Ctrl+[, Ctrl+]:代码行缩进 - Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 - Ctrl+C Ctrl+V:复 ...
- asp.net c#采集需要登录页面的实现原理及代码
当我们采集页面的时候,如果被采集的网站需要登录才能采集,原理搞清楚了,就好办了,我们所要做的仅仅是在采集的时候(或者说HttpWebRequest提交数据的时候),将Cookie信息放入Http请求头 ...
- C++11写算法之插入排序
插入排序,是指将从1 –> size-1的数一个个插入到前面已经排序好的数组中. 时间复杂度:O(n^2) , O(nlgn) (lgn指使用二分查找插入点位置) 空间复杂度:O(1) // ...
- MPEG 编解码相关资料收集
以下是我搜集的关于MPEG1/2的编解码相关的资料: (注:mpge帧内编码是基于jpeg编码的,所以请务必先理解jpeg的编解码原理.) 1:Introduction to MPEG 2 Video ...
- java中訪问修饰符
较之c++ 中 public,proctected, private 三种訪问控制, java多了默认訪问控制. java中四种訪问控制权限 简单描写叙述为一下四句: 1)private 仅本类可见 ...
- SSL证书的生成
openssl工具下载路径:链接:https://pan.baidu.com/s/1o0-s8OplHZt55Cio2HmjVA 密码:u759 1.使用openssl工具生成一个RSA秘钥 ...
- 【BZOJ3277/3473】串/字符串 后缀数组+二分+RMQ+双指针
[BZOJ3277]串 Description 字符串是oi界常考的问题.现在给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串(注意包括本身). Inpu ...
- jwPlayer读取本地视频及相关配置（Tomcat配置虚拟目录）
最近做项目,发现好多知识点都是以前做过的或用过的,但最后要用到的时候,要么就记不牢了,要么就还是得重新整理一遍,所以以后有用的东东,尽量整理一下或Market下了. 项目要求:读取服务器多个视频到本地 ...
- SharePoint服务器端对象模型 之 访问文件和文件夹（Part 2）
4.添加文件夹 文件夹的创建方法在文档库和普通列表中稍有不同. 在文档库中,与一般的集合操作相同,直接使用SPFolderCollection的Add(string name)方法即可添加文件夹,例如 ...