Vue.js 学习笔记 第4章 v-bind 及 class与style…
2019-04-28 08:21:14来源：博客园 阅读 ()
本篇目录：
4.1 了解v-bind指令
4.2 绑定class的几种方式
4.3 绑定内联样式
DOM元素经常会动态地绑定一些class类名或style样式，本章将介绍使用v-bind指令来绑定class和style的多种方法。
4.1 了解v-bind指令
在第2章时，我们已经介绍了指令v-bind的基本用法以及它的语法糖，它的主要用法是动态更新HTML元素上的属性。
回顾一下下面的示例：
1 <div id="app"> 2 <a v-bind:href="url">超链接</a> 3 <img v-bind:src="imgUrl"> 4 <!-- 缩写为 --> 5 <a :href="url">超链接</a> 6 <img :src="imgUrl"> 7 </div> 8 9 <script> 10 var app = new Vue({ 11 el: "#app", 12 data: { 13 url: "https://www.geeksss.com", 14 imgUrl: "http://www.geeksss.com/logo.png" 15 } 16 }); 17 </script>
链接的href属性和图片的src属性都被动态设置了，当数据变化时，就会重新渲染。
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定。
它们也是HTML的属性，因此可以使用v-bind指令，我们只需要用v-bind计算出表达式最终的字符串就可以。
不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。
4.2 绑定class的几种方式
4.2.1 对象语法
给v-bind:class设置一个对象，可以动态地切换class，例如：
1 <div id="app"> 2 <div :class="{ 'active' : isActive }"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true 10 } 11 }); 12 </script>
提示：
上面的:class等同于v-bind:class，是一个语法糖，如不特殊说明，后面都将使用语法糖写法，可以回顾第2.3章节。
上面示例中，类名active依赖于数据isActive。
当其为true时，<div>会拥有类名active，为false时则没有。
所以上例最终渲染完的结果是：
1 <div id="app"> 2 <div class="active"></div> 3 </div>
对象也可以传入多个属性，来动态切换class。
另外，:class可以与普通class共存，例如：
1 <div id="app"> 2 <div class="static" :class="{'active':isActive, 'error':isError}"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true, 10 isError: false 11 } 12 }); 13 </script>
:class内的表达式每项为真时，对应的类名就会加载，上面渲染后的结果为：
1 <div id="app"> 2 <div class="static active"></div> 3 </div>
当数据isActive或isError变化时，对应的class类名也会更新。
比如当isError为true时，渲染后的结果为：
1 <div id="app"> 2 <div class="static active error"></div> 3 </div>
当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性。
这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data或computed。
例如使用计算属性：
1 <div id="app"> 2 <div :class="classes"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true, 10 error: null 11 }, 12 computed: { 13 classes: function() { 14 return { 15 active: this.isActive && !this.error, 16 "text-fail": this.error && this.error.type === "fail" 17 }; 18 } 19 } 20 }); 21 </script>
除了计算属性，你也可以直接绑定一个Object类型的数据，或者使用类似计算属性的methods。
4.2.2 数组语法
当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
1 <div id="app"> 2 <div :class="[activeCls, errorCls]"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 activeCls: "active", 10 errorCls: "error" 11 } 12 }); 13 </script>
渲染后的结果为：
1 <div id="app"> 2 <div class="active error"></div> 3 </div>
也可以使用三元表达式来根据条件切换class，例如下面的示例：
1 <div id="app"> 2 <div :class="[isActive ? activeCls : '', errorCls]"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true, 10 activeCls: "active", 11 errorCls: "error" 12 } 13 }); 14 </script>
样式error会始终应用，当数据isActive为true时，样式active才会被应用。
class有多个条件时，这样写较为繁琐，可以在数组中使用对象语法：
1 <div id="app"> 2 <div :class="[{'isActive':isActive}, errorCls]"></div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true, 10 errorCls: "error" 11 } 12 }); 13 </script>
当然，与对象语法一样，也可以使用data、computed和methods三中方法。
以计算属性为例：
1 <div id="app"> 2 <button :class="classes">按钮</button> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 size: "large", 10 disabled: true 11 }, 12 computed: { 13 classes: function() { 14 return [ 15 "btn", 16 { 17 ["btn-" + this.size]: this.size !== "", 18 ["btn-disabled"]: this.disabled 19 } 20 ]; 21 } 22 } 23 }); 24 </script>
示例中的样式btn会始终应用，当数据size不为空时，会应用样式前缀btn-，后加size的值。
当数据disabled为true时，会应用样式btn-disabled。
所以该示例最终渲染的结果为：
1 <div id="app"> 2 <button class="btn btn-large btn-disabled">按钮</button> 3 </div>
使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用组件的时候。
所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。
4.2.3 在组件上使用
提示：
本节内容依赖第7章组件相关的内容，如果你尚未了结过Vue.js的组件，可以先跳过这节，稍后再阅读。
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上。
例如声明一个简单的组件：
1 Vue.component("my-component", { 2 template: "<p class='article'>一些文本</p>" 3 });
然后在调用这个组件时，应用上面两节介绍的对象语法或数组语法给组件绑定class。
以对象语法为例：
1 <div id="app"> 2 <my-component :class="{'active':isActive}"></my-component> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 isActive: true 10 } 11 }); 12 </script>
最终组件渲染后的结果为：
1 <div id="app"> 2 <p class="article active">一些文本</p> 3 </div>
这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效。
当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递。
这些用法同样适用于下一节绑定内联样式style的内容。
4.3 绑定内联样式
使用v-bind:style(即:style)可以给元素绑定内联样式。
方法与:class类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS：
1 <div id="app"> 2 <div :style="{ 'color':color, 'fontSize':fontSize+'px' }">文本</div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 color: "red", 10 fontSize: 14 11 } 12 }); 13 </script>
CSS属性名称使用驼峰命名(camelCase)和短横分隔命名(kebab-case)。
渲染后的结果为：
1 <div id="app"> 2 <div style="color: red; font-size: 14px;">文本</div> 3 </div>
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里。
以data为例改写上面的示例：
1 <div id="app"> 2 <div :style="styles">文本</div> 3 </div> 4 5 <script> 6 var app = new Vue({ 7 el: "#app", 8 data: { 9 styles: { 10 color: "red", 11 fontSize: 14 + "px", 12 } 13 } 14 }); 15 </script>
应用多个样式对象时，可以使用数组语法：
1 <div :style="[styleA, styleB]">文本</div>
在实际业务中，:style的数组语法并不常用，因为往往可以写在一个对象里面，而较为常用的应当是计算属性。
另外，使用:style时，Vue.js会自动给特殊的CSS属性名增加前缀，比如transform。
原文链接:https://www.cnblogs.com/geeksss/p/10776457.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：关于Node.js中的路径问题
- Jquery插件写法笔记整理 2020-03-29
- 如何用javascript连接access数据库 2020-03-20
- vue.js开发环境搭建教程 2020-03-16
- 在JavaScript中尽可能使用局部变量的原因 2020-03-08
- JsEasy的介绍 2019-10-25
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
