欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js 学习笔记 第4章 v-bind 及 class与style绑定

程序员文章站 2022-05-14 12:08:48
DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定class和style的多种方法。 ......

 

本篇目录:

 

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增强了对classstyle的绑定。

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>

 

当数据isactiveiserror变化时,对应的class类名也会更新。
比如当iserrortrue时,渲染后的结果为:

1 <div id="app">
2     <div class="static active error"></div>
3 </div>

 

:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性。
这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用datacomputed
例如使用计算属性:

 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会始终应用,当数据isactivetrue时,样式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>

 

当然,与对象语法一样,也可以使用datacomputedmethods三中方法。
以计算属性为例:

 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的值。
当数据disabledtrue时,会应用样式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>

 

大多数情况下,直接写一长串的样式不便于阅读和维护,所以一般写在datacomputed里。
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