第六节:Vue指令:v-bind动态属性绑定

作者: 曹老师 | 来源:发表于2022-06-07 00:04 被阅读0次

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

上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.

1.1 v-bind 指令基本使用

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

<div id="app">
    <!-- 使用v-bind指令 -->
    <!-- 添加v-bind绑定以后,className将不在是一个字符串,而是一个变量,data数据的中className -->
    <div v-bind:class="className">你好</div>

    <!-- 未使用v-bind指令 -->
    <div class="className">Hello</div>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            className:"box"
        }
    })

</script>

显示结果

image

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

未使用v-bind指令的class属性的值是一个字符串,表示给标签添加一个className的类名

使用v-bind指令的class属性值不在是字符串,而是表达式, 表达式里的className不是一个普通的字符,而是一个变量,Vue实例data属性中的数据

1.2 简写方式

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

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

对于v-bind指令的认识和基本使用,我们已经了解了,
那么接下来就看看v-bind使用过程中的一些问题和注意项

2. vue 属性的动态绑定

通过上面的学习,我们知道,v-bind 指令可以让我们将属性值关联到Vuedata数据中,这样的属性,我们称作为属性的动态绑定
属性的动态绑定比较符合vue以数据为驱动的模式,如果需要修改那个属性值,就可以直接通过修改Vue数据即可,
例如,项目中的轮播就像轮播图中的数据, 在替换轮播数据的时候就会非常方便

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

<div id="app">
    <img :src="src" alt="">
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            src: "./images/12.png" 
        }
    })
</script>

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

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

注意:
动态属性绑定, 在我们需要的时候在使用,如果一个属性的是是固定的,
并不会在未来发生改变, 就没有必要动态绑定属性.

但在属性动态绑定过程中有两个属性比较特殊, 这两个属性就是class 和style属性,

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

接下来好好研究研究

3 动态绑定class属性

3.1 动态绑定class的基本使用

3.1.1 动态绑定class与普通class属性对比

动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,

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

<h2 class="msg">Hello World</h2>

未使用 v-bind指令动态绑定属性时, class的值就是字符串, 上例中h2有一个类名,类名是msg

使用了动态绑定示例:

<h2 v-bind:class="msg">Hello World</h2>

<!-- 可以简写为-->
<h2 :class="msg">Hello World</h2>

如果使用动态绑定指令, 那么此时class后面的引号不在是字符串,而是一个JavaScript表达式, msg也就成为了一个变量,因此此时h2标签的类名不是字符串msg, 而是数据中msg中的值

示例:

<div id="app">
    <!-- 未使用动态绑定的class属性 -->
    <div class="msg">hello world</div>

    <!-- 使用v-bind 动态绑定class属性 -->
    <div :class="msg">你好! Vue</div>
</div>

<script>
    let vm = new Vue({
        el:"#app",
        data: {
            msg:"box"
        }
    })
</script>

显示结果

image

此时通过示例,我们就发现使用动态绑定class属性的div,class属性值被替换为了Vue data属性中的数据, 也就是说动态绑定class属性的msg是一个变量

没有使用动态绑定class属性的值就是一个普通的字符串msg

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

动态绑定class 和没有动态绑定的class可以同时使用, 不冲突,Vue会将动态class属性与普通class属性在最后显示是合并到一起

<div id="app">
    <!-- 动态绑定class -->
    <h2 class="wrap" :class="msg">你好</h2>
</div>
<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            msg:'box'
        }
    })
</script>

显示结果:

image

通过示例结果发现,这样使用,h2将有两个类名,一个是wrap, 一个是box,

其中wrap是普通class属性的值, box是动态class属性值msg变量在Vue data属性中所表示的值

2.3 数组语法

2.3.1 动态绑定class的错误写法

我们千万不要在动态绑定class属性中像以前利用空格一样绑定多个类名

<h2 :class="msg box">Hello World</h2>

这样的写法就会报错, 那么如何才能做到使用动态属性绑定多个类名呢,

2.3.2 动态绑定多个类名

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

因为动态绑定的class值是表达式,我们就可以利用数组来罗列多个动态绑定的类名,

因此可以 v-bind:class动态绑定class值中协商数组，使用数组来罗列多个绑定的class类名

示例入校:

<div id="app">
    <h2 :class="[boxClass,wrapClasss]">你好</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            boxClass:"box",
            wrapClass:'wrap'
        }
    })
</script>

image

这样渲染出来的结果h2 标签会同时拥有box 和wrap两个类名

2.3 对象绑定

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

既然动态绑定class的值是表达式,那么我们就可以在表达式里,写一些基本的表达式处理数据,
通过逻辑的判断来决定要不要给DOM元素添加这个类名

比如

<div id="app">
    <!-- 动态class值中写入三目运算符逻辑 -->
    <!-- 此时变量isTrue的值如果为true, 则显示变量msg所表示的值 -->
    <!-- 如果isTrue为false, 则为空字符串 -->

    <!-- 1\. isTrue值为 true时 -->
    <h2 :class="isTrue ? msg : ''">你好</h2>

    <!-- 1\. isTrue值为 false时 -->
    <h2 :class="!isTrue ? msg : ''">hello</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
            msg:'box'
        }
    })
</script>

示例结果:

image

通过实例,我们会发现, 当isTrue 的值为 true时,h2标签有类名, 为false是,值为空字符串,无类名.

因此通过这个例子,我们就可以利用数据isTrue布尔值的判断来切换类名,改变样式

示例如下:

<style>
    .box{
        color:red;
    }
    .wrap{
        color:skyblue;
    }
</style>

<div id="app">
    <h2 :class="isTrue ? msg : 'wrap'">你好</h2>
    <button @click="changClassName">点击切换颜色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
            msg:'box'
        },
        methods:{
            changClassName(){
                this.isTrue = !this.isTrue
            }
        }
    })
</script>

上面的实例, 在点击是button按钮时, 会切换h2标签的类名,同时会改变h2的字体样式.

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

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

那么我们不妨自己想一想,如果我一个标签上有多个需要动态切换的类名怎么办

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

<h2 
    :class="isTrue ? msg : ''"
    :class="flag ? 'haha' : ''"
>你好</h2>

如果你真的这么写了, 你会发现,后面动态绑定的class没有任何效果, 所以这种写法是有问题的

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

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

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

喝口水,接着往下聊.

2.3.2 动态多个类名切换

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

都已经知道了动态绑定class的值是表达式, 所以我们可以将 v-bind:class值写成一个对象，以动态地切换 class：

<div :class="{ box:isTrue }"></div>

语法说明:

上面的语法表示: box 这个类名是否存在将取决于数据属性isTrue 的布尔特性。
如果 isTure的值为true, 那么div 将有类名box 否则, div没有box类名
需要注意,此时box就是一个类名,并不是vue中的数据属性

因为对象可以有多个属性值对, 因此我们可以在对象中传入更多属性来动态切换多个 class。

<div :class="{ box:isTrue, wrap: !isTrue }"></div>

写法说明:

当isTrue的值为true,是div的类名为box, 此时!isTrue的值就是false, 所有div没有wrap类名
如果isTrue的值为false 则情况相反,

2.3.3 修改示例

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

<style>
    .box{
        color:red;
    }
    .wrap{
        color:skyblue;
    }

</style>
<div id="app">
    <h2 :class="{box:isTrue, wrap: !isTrue}">你好</h2>
    <button @click="changClassName">点击切换颜色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
        },
        methods:{
            changClassName(){
                this.isTrue = !this.isTrue
            }
        }
    })
</script>

这样我们就可以做到两个类名之间的切换, 如果希望有多个类名切换, 可以继续给对象添加属性

4. 绑定行内样式

v-bind动态绑定属性除了class比较特殊外,还有一个style行内样式属性也比较特殊

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

 <h2 style="color:red;font-size:30px;">Hello World</h2>

显示结果:

image

需求分析：

和其他动态绑定属性一样,有的时候,我们就希望样式的值是可以动态变化的.
那么我们就需要使用到v-bind动态绑定属性的指令,
同时使用动态绑定属性以后,style属性的值将变成表达式. 以前的写法就不太合适了
既然是表达式,我们就可以使用对象和数组方式罗列样式.

先看看值为对象的用法

4.2 对象语法

4.2.1 动态绑定style属性的基本用法

动态绑定style属性说明:

如果使用动态绑定属性方法绑定行内样式,那么style属性值将不再是字符串,而是表达式,
动态绑定style的值既然是表达式，那么就可以在表达式中使用对象.
如果值为对象,那么对象的属性名则为CSS样式属性, 值为样式的值。
注意,此时对象中的属性值,可以是确定的样式值,也可以是vue的数据变量,
因此有些值不能再像style标签中一样书写,例如50px,以前使用不加引号,现在必须加引号

4.2.2 对象写法关于值的问题

如果使用动态绑定属性style里的对象值不加引号, 就会有如下的问题:
例如

<h2 :style="{color:red,font-size:30px}">Hello World</h2>

上面的这种写法就会报错, red和30px会被当做变量去Vue data属性中找对应的数据, 但是找不到就报错

正确的写法应该是这样的

<h2 :style="{color:'red',fontSize:'30px'}">Hello World</h2>

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

image

4.2.3 对象写法的属性问题:

相信通过刚才的例子,你也发现了,我们发font-size 的写法改为了fontSize.

因为CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 都可以：

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

<!-- 驼峰式 (camelCase) 写法 --->
<h2 style="color:red;fontSize:30px;">Hello World</h2>

<!-- 短横线分隔 (kebab-case --->
<h2 style="color:red;font-size:30px;">Hello World</h2>

但是一旦使用了动态绑定, style属性的值将变成JS表达式,

表达式里的大括号即为JS对象, 对象属性的标识符是不支持-连字符的,

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

驼峰式 (camelCase)
如果要使用连字符, 就需要添加双引号, 将属性变成字符串的写法

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

<!-- 驼峰式 (camelCase) 写法 --->
<h2 :style="{color:'red', fontSize:'30px'}">Hello World</h2>

<!-- 短横线分隔 (kebab-case) 但是要加引号 --->
<h2 :style="{color:'red', 'font-size' :'30px'}">Hello World</h2>

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

<div id="app">
    <h2 
        :style="{color:'red', fontSize: fontSize}"
    >Hello World</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            fontSize: "30px"
        }
    })
</script>

动态属性style的样式值,CSS属性中,color 是字符串'red'值, 字体大小font-size的值确实vue数据中fontSize的值,显示结果没有任何变化

这样也会有一个不好的点,就是,如果样式特别多, 就会有点麻烦,

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

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

因为动态属性style的值是一个对象,因此我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了

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

示例如下:

<div id="app">
    <h2 :style="styleObject">Hello World</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            }
        }
    })
</script>

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

<div id="app">
    <h2 :style="styleObject">Hello World</h2>
    <button 
            @click="changColor"
    >点击切换颜色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            }
        },
        methods:{
            changColor(){
                this.styleObject.color = this.styleObject.color == "red"? "skyblue": "red"
            }
        }
    })
</script>

4.3 数组语法

我们也可以扩展对象的用法, 给动态属性的值绑定为数组, 数组中就可以使用多组样式对象来绑定CSS样式

<div id="app">
    <h2 
        :style="[styleObject, baseStyle]"
   >Hello World</h2>

</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            },
            baseStyle: {
                margin: 0,
                padding: 0,
                lineHeight: "50px"
            }

        }
    })
</script>

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

第六节:Vue指令:v-bind动态属性绑定

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

1.1 v-bind 指令基本使用

1.2 简写方式

2. vue 属性的动态绑定

3 动态绑定class属性

3.1 动态绑定class的基本使用

3.1.1 动态绑定class与普通class属性对比

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

2.3 数组语法

2.3.1 动态绑定class的错误写法

2.3.2 动态绑定多个类名

2.3 对象绑定

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

2.3.2 动态多个类名切换

2.3.3 修改示例

4. 绑定行内样式

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

4.2 对象语法

4.2.1 动态绑定style属性的基本用法

4.2.2 对象写法关于值的问题

4.2.3 对象写法的属性问题:

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

4.3 数组语法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue系列