v-bind:指令的认识与基本使用，你了解多少？

1. v-bind:指令认识和基本使用

前一小节的学习,使我们明白以v开头的指令后面会跟随表达式,而且标签也包含一些合法的属性标签.如果需要将这些属性的值设置为表达式,我们可以借助Vue给出的v-bind:指令来实现.

1.1 v-bind 指令基本使用

v-bind:指令会将普通属性的值变为表达值,比如

    
    
    
你好
    
    
Hello

显示结果

通过示例显示的结果就了解

未使用v-bind指令的class属性值是单个字符串,直接指定给标签的类名名称

采用v-bind指令的class属性值不再是文本,而是公式,公式中的className并非一般字符,而是变数,该变数来源于Vue实例data属性里的值

1.2 简写方式

Vue 对于v-bind指令还提供了简写方式,如下

...

...

对于v-bind指令的认识和基本使用,我们已经了解了,

那么接下来就看看v-bind使用过程中的一些问题和注意项

2. vue 属性的动态绑定

经过之前的了解,我们明白,v-bind 指令能够实现属性值与Vuedata数据的连接,这类属性,我们称之为具备动态绑定功能的属性

动态绑定属性的方式与Vue数据驱动的理念高度契合,若需变更某个属性的值,只需直接调整Vue中的对应数据即可

项目里的轮播功能, 就好比展示图中的素材, 当需要更新展示素材时, 操作起来十分便捷

来个例子: 动态改变显示图片

这个时候我们只需要改变数据里的src的值,图片就会发生变化

vm.src ="./images/13.jpg"

注意:

动态属性链接，仅在必要之际调用，倘若某个属性是恒定的

并不会在未来发生改变, 就没有必要动态绑定属性.

在动态绑定属性时,有两个属性需要特别留意,分别是class属性和style属性,它们的表现形式与其他属性有所不同。

Vue.js 针对 v-bind 在 class 和 style 上的应用进行了特别优化。表达式返回值不仅限于字符串形态，还能是对象结构或数组形式。

接下来好好研究研究

动态绑定能够调整对象的类属性，3.1部分介绍了动态绑定类属性的基础用法，3.1.1小节将动态绑定类属性和常规类属性进行对比分析

动态绑定类名需要借助v-bind功能实现, 一旦应用了v-bind指令, class属性的内容就不再是单一的文本, 而转变为可计算的表达式

比如未使用动态绑定示例:

Hello World

当没有运用v-bind指令来动态绑定属性的情况下, class属性的值会是一个文本字符串, 在前述示例中, h2元素包含一个类名, 该类名为msg

使用了动态绑定示例:

Hello World

Hello World

运用动态绑定机制时, class后面的引号就不再是文本,而变成了JavaScript代码片段, msg便转化为一个可变元素,所以这时候h2元素的类属性值并非单纯的msg文本,而是msg字段所包含的实际内容

示例:

    
    
hello world
    
    
你好! Vue

显示结果

现在通过案例,我们能够明白,采用动态绑定class属性的div,其class属性值被更换成了Vue data属性里的内容,换言之,动态绑定class属性的msg是一个可变的内容

未应用动态绑定class属性的值，就是一个常规字符串msg

3.1.2 动态绑定class与普通class混用

动态绑定的类别和静态定义的类别能够并存, 互不干扰, Vue会将动态设定的类别样式与常规设定的类别样式在最终呈现时整合在一起

    
    
你好

显示结果:

根据实例观察得知,采用此种方式操作,该h2元素会同时拥有两个类名,分别是wrap和box,

其中，wrap属于常规的class属性设定，而box则属于动态的class属性设定，其具体内容源自msg变量，该变量在Vue的data属性中被定义和储存

2.3 数组语法2.3.1 动态绑定class的错误写法

我们绝不能在动态绑定类的属性时，像过去使用空格那样，同时指定好几个类名

Hello World

这种表述方式会产生异常, 那么怎样实现动态地关联多个类名呢,

2.3.2 动态绑定多个类名

有的时候我们希望可以在一个DOM元素上动态绑定多个类名,

动态绑定的class值本质上是表达式,因此能够借助数组,将多个动态绑定的类名一一列出

因此能够通过动态绑定class值来协商数组，借助数组列出多个绑定的class类名

示例入校:

    
你好

这种效果下h2 标签将附带box和wrap这两个分类名称

2.3 对象绑定2.3.1 动态绑定class值的处理逻辑

动态绑定class的值属于一种表达式形式，因此可以在其中包含若干基础运算来处理数据，这些运算能够对数据进行相应的转换和加工。

通过逻辑的判断来决定要不要给DOM元素添加这个类名

比如

    
    
    
    
    
你好
    
    
hello

示例结果:

借助具体案例,我们能够察觉到, 当isTrue的状态是肯定时,h2元素会带有属性, 当isTrue的状态是否定时,h2元素则不具备该属性, 属性的值会是空白文本.

由此可见,借助这个案例,我们能够借助数据isTrue布尔值的判定,转换类名,调整外观

示例如下:

    
你好
    点击切换颜色

那个示例, 当点中按钮时, 会转换h2元素的分类, 并且会调整h2的文字形态.

注意:又到了教会你们,却不推荐你们使用的时刻来了

你要问我为什么不推荐用?

那么我们不妨自己琢磨一下,假如一个标签里包含好几个需要随时变换的类名,应该怎么处理

我们是不是会想到如下的写法:

你好

倘若你那样书写, 你便会察觉, 后续动态关联的类别将毫无作用, 因此这种做法实属不当

同时我们也会发现这种三目表达式切换类名也不是特别友好,

此时此刻,此情此景, 我们就不得不探讨一下两个问题?

如何更好的切换类名如何绑定多个动态的切换

喝口水,接着往下聊.

2.3.2 动态多个类名切换

上回咱们聊到,如何解决如何更好的绑定多个类名的切换.

明白动态绑定class本质为表达式, 因此可将 v-bind:class属性设定为对象形式,借此实现动态切换class效果

语法说明:

这个语法规则说明: box这个类名的有无,要看数据属性isTrue的布尔值如何。当isTrue的值是真时, div元素会带有box类名。当isTrue的值是假时, div元素不会包含box类名。需要留意,这里的box指的是一个类名,而不是vue框架里的数据属性

事物包含多种特性设定, 因此能够通过赋予更多特性参数, 实现动态变换多种形态。

写法说明:

当isTrue为真且div的类名为box,那么!isTrue就为假,所有div都不带wrap类名,如果isTrue为假,情况则与此不同,2.3.3 修改示例

此时,我们就可以利用所学重新修改上面点击改变样式案例的写法

    
你好
    点击切换颜色

通过这种方式能够实现两类名称的转换，若需要处理更多类别的切换，则可进一步为该对象增加相应字段

4. 绑定行内样式

动态绑定属性当中,除了class比较特殊,style行内样式属性也同样比较特殊

4.1 未使用vue 动态绑定属性的行内样式

 
Hello World

显示结果:

需求分析：

样式的数值有时需要根据情况而变化,这就要求运用v-bind指令实现动态绑定。采用动态绑定之后,style属性的取值会转变为表达式形式。原先的写法已不再适用,因为表达式可以借助对象或数组来组织样式信息。

先看看值为对象的用法

对象语法4.2.1 动态设定style属性的根本方法

动态绑定style属性说明:

采用动态绑定属性手段来应用行内样式时,style属性的内容就不再是单纯的文本,而是变成了公式。由于动态绑定的style值本质上是一个公式,因此可以在公式里面调用对象。当公式的结果是对象时,对象的字段名对应着CSS的样式名称,而字段值则代表样式的具体数值。当前对象里的属性值,有可能是固定的格式,也有可能是vue中的数据,这就导致部分值不能像往日那样在style标签里直接写,比如50px,以前书写时不用加引号,现在就必须加上引号

4.2.2 对象写法关于值的问题

运用动态绑定属性style中的对象值时若不加引号，会出现下列情况：

例如

Hello World

这种表述方式会导致问题, 因为"red"和"30px"会被当作Vue data中的属性进行检索, 若检索不到就会引发异常

正确的写法应该是这样的

Hello World

也能正确显示结果, 但是要注意字符串嵌套问题

4.2.3 对象写法的属性问题:

明白刚才的示范之后,你注意到了,我们设置字号属性时,把font-size换成了fontSize。

CSS 属性的命名方式既可以是驼峰式，也可以是短横线分隔式。

因此,在普通的style属性中一下两种写法都可以

Hello World

Hello World

一旦启用动态绑定，style属性的值就转为JS表达式了

表达式中的大括号代表JS对象, 对象属性的名称不允许包含减号,

如果我们有两种处理方案,

驼峰命名法若需运用短横线,就必须套上引号,将属性转为字符串形式书写

因此动态绑定需要如下写法

Hello World

Hello World

推荐用驼峰写法, 对象的值也可以是变量

    
Hello World

动态属性style的样式值，在CSS属性里，color是字符串'红色'值，字体大小font-size的值，确实对应vue数据中的fontSize值，显示结果没有任何变动

这种方式存在一个弊端，就是，当样式种类繁多时，处理起来会比较复杂，让人感到不便。

4.2.4 动态绑定style属性的数据对象的用法

如何解决对象写法,当属性过多时的复杂问题呢?

动态属性style的值本质上是某个对象,因此 我们能够把这个对象单独拿出来,直接充当vue数据data属性的内容,这样一来,我们便可以便捷地绑定整个对象了

而且直接绑定一个对象,看起来更清晰

示例如下:

    
Hello World

如果我们想动态修改样式也可以如下处理

    
Hello World
    点击切换颜色

4.3 数组语法

我们能够拓展对象的运用方式, 可以将动态属性的数值设定为数列, 数列内部能够容纳数个风格对象, 以便与CSS样式建立关联

    
Hello World
    

这样的写法,可以将样式才分, 可以做到样式复用,