Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）
这个相对来说简单，看一遍代码就懂。
一、完整片段：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title>Class与Style绑定</title>
<style type="text/css">
.classA {
/*红色字体*/
color: red;
} .classB {
/*斜体*/
font-style: italic;
} .classC {
/*蓝紫色字体*/
color: blueviolet;
} .classD {
/*添加padding、margin*/
margin: 5px;
padding: 5px;
} .classE {
/*边框*/
border: 1px solid saddlebrown;
} .classF {
/*背景色*/
background-color: lightgoldenrodyellow;
} .drTransform {
transform: rotate(7deg);
-ms-transform: rotate(7deg);
/* IE 9 */
-moz-transform: rotate(7deg);
/* Firefox */
-webkit-transform: rotate(7deg);
/* Safari 和 Chrome */
-o-transform: rotate(7deg);
transition-duration: 5s;
}
</style>
</head> <body>
<h2>绑定Html Class</h2>
<p>尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是不推荐这种写法和 v-bind:class 混用。两者只能选其一！</p>
<div id="dr01">
<h4>#对象语法</h4>
<p>给v-bind:class一个对象，通过true、false动态切换class，isA为false，true，所以div的class为static、classB</p>
<!-- 下面是两种方式，一种直接在v-bind:class里面展示对象，另外一种，在data里面添加classObj属性，在v-bind:class里面赋值classObj对象 -->
<div v-bind:class="{static:isStatic,classA:isA,classB:isB}">1、对象语法class test</div>
<div v-bind:class="classObj">2、对象语法another class attribute bind</div>
</div> <hr /> <div id="dr02">
<h4>#数组语法</h4>
<div v-bind:class='["classC","classD","classE","classF"]'>1、数组语法，直接添加"className"，不能动态更改，与class="classC classD classE classF"保持一致</div>
<div v-bind:class='["classC","classD",isE?"classE":"","classF"]'>1、数组语法，直接添加"className"，里面使用了三元表达式</div>
<div v-bind:class='[drClassC,drClassD,drClassE,drClassF]'>2、数组语法，数组的元素在data里面有定义，挨个赋值className</div>
<div v-bind:class='[drClassC,drClassD,drClassE,isF?drClassF:""]'>3、数组语法，里面使用了三元表达式</div> <hr /> <h4>#对象语法、数组语法混合使用</h4>
<div>
<p>在 1.0.19+ 中，可以在数组语法中使用对象语法：{{cHtml}}</p>
<span>classA: data定义（三元表达式）, classB:直接引用（三元表达式），classC:data引用，classD：直接引用，EFGH是对象属性，所以不论属性名称是否有引号，只要属性值在data里面定义的是true，引用的都是属性名，false不引用</span>
<div v-bind:class='[isA?drClassA:"",isB?"classB":"",drClassC,"classD",{"classE":isE,drClassF:isF,"classG":isG,drClassH:isH}]'>
class属性综合测试
</div>
</div>
</div> <hr /> <h2>绑定内联样式</h2>
<div id="dr03">
<h4>#对象语法</h4>
<div v-bind:style="{color:activeColor,fontSize:activeFontSize}">1、对象语法简单测试</div>
<div v-bind:style="styleObj">2、对象语法（在data下定义）</div>
</div>
<div id="dr04">
<h4>#数组语法</h4>
<div v-bind:style="[{color:'blue',fontSize:'15px'},{fontStyle:'italic',backgroundColor:'lightgoldenrodyellow'}]">2、数组语法简单测试</div>
<div v-bind:style="[styleObj01,styleObj02]">2、数组语法简单测试</div>
</div>
<script>
var dr01 = new Vue({
el: "#dr01",
data: {
isStatic: true,
isA: true,
isB: true,
classObj: {
static: true,
classA: true,
classB: true,
}
}
});
var dr02 = new Vue({
el: "#dr02",
data: {
isA: true,
isB: true,
isE: true,
isF: true,
isG: true,
isH: true,
drClassA: "classA",
drClassB: "classB",
drClassC: "classC",
drClassD: "classD",
drClassE: "classE",
drClassF: "classF",
drClassG: "classG",
drClassH: "classH",
cHtml: '<div v-bind:class="[classA, { classB: isB, classC: isC }]">'
}
});
var dr03 = new Vue({
el: "#dr03",
data: {
activeColor: "#ff0000",
activeFontSize: "20px",
styleObj: {
color: "red",
fontSize: "20px"
}
}
});
var dr04 = new Vue({
el: "#dr04",
data: {
styleObj01: {
color: "blue",
fontSize: "15px"
},
styleObj02: {
fontStyle: "italic",
backgroundColor: "lightgoldenrodyellow"
}
}
});
</script>
</body> </html>
二、结果展示：
三、渲染后的html代码
Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）的更多相关文章
- Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
- Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue.js-----轻量高效的MVVM框架（八、使用组件）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js-----轻量高效的MVVM框架（五、计算属性）
#基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...
- Vue.js-----轻量高效的MVVM框架（四、指令）
Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性.指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用.指令的职责就是当其表达式的值 ...
- Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）
插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...
- Vue.js 学习笔记 第4章 v-bind 及 class与style绑定
本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...
随机推荐
- 算法Sedgewick第四版-第1章基础-009一链表与数组的比较及其他数据结构
1. 2.
- 简单VBS教程.RP
Mimick同菜鸟==.文转豆瓣~:https://www.douban.com/note/88562379/ 讲一下VBScript.主要面向菜鸟,懂得编程的朋友就不要浪费时间了,如果你想接触以下V ...
- scala中lazy
Scala中通过lazy关键字来定义惰性变量,惰性变量只能是不可变变量.只有在调用惰性变量的时候,才会去实例化这个变量
- Umbraco Form 中需要为一个Form的某个field设置特别的CSS样式
在项目开发中,我有一个需求,需要建立一个页面,这个页面上有一个form, 这个form上有一个checkbox, 就是普通的接受terms & conditions, 类似下图 这个项目中的U ...
- Mac下的UI自动化测试 （一）
在我看来,实现UI自动化测试的过程一向都是令人快乐的事情,而维护它们就是跟噩梦一样了,尤其是对每次CI产生的build进行BVT测试,由于开发不会告诉你任何UI的变化,那么你拿到的测试结果就势必会一片 ...
- MVC异常的统一处理
禁用异常跟踪 很多时候异常是不可预料的,在每个Action方法或Controller上应用Exception Filter是不现实的.而且如果异常出现在View中也无法应用Filter.如RangeE ...
- Algorithms - Bucket sort
印象 图1 将元素分布在桶中 图2 元素在每个桶中排序 思想 桶排序将数组分到有限数量的桶子里.每个桶子再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序). 分析 时间复杂度: ...
- Gazebo学习随记5 杂记
模拟建筑编辑器 将卫星图导入世界,方便空中机器人模拟 录像和回放 记录筛选 给关节添加力/扭矩 一开始不知道哪里出现了偏差以一动不动,重启就好了 HDF5数据集 代码内省 模型插件 !!!我终于 ...
- [转]10分钟梳理MySQL知识点：揭秘亿级高并发数据库调优与最佳实践法则
转:https://mp.weixin.qq.com/s/RYIiHAHHStIMftQT6lQSgA 做业务,要懂基本的SQL语句: 做性能优化,要懂索引,懂引擎: 做分库分表,要懂主从,懂读写分离 ...
- 【NOIP 2015】斗地主
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的 A 到 K 加上大小王的共 54 张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下: 3 ...