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

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>

显示结果

v-bind.png

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

未使用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>

显示结果

动态绑定class示例.png

此时通过示例,我们就发现使用动态绑定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>

显示结果:

动态class与普通class同用.png

通过示例结果发现,这样使用,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>
动态class罗列多个类名.png

这样渲染出来的结果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>

示例结果:

动态class中的表达式.png

通过实例,我们会发现, 当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没有任何效果, 所以这种写法是有问题的

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



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

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

喝口水,接着往下聊.


2.3.2 动态多个类名切换

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

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

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

语法说明:

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


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

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

写法说明:

  1. 当isTrue的值为true,是div的类名为box, 此时!isTrue的值就是false, 所有div没有wrap类名
  2. 如果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>

显示结果:

未动态绑定style.png

需求分析：

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

先看看值为对象的用法


4.2 对象语法
4.2.1 动态绑定style属性的基本用法

动态绑定style属性说明:

  1. 如果使用动态绑定属性方法绑定行内样式,那么style属性值将不再是字符串,而是表达式,
  2. 动态绑定style的值既然是表达式，那么就可以在表达式中使用对象.
  3. 如果值为对象,那么对象的属性名则为CSS样式属性, 值为样式的值。
  4. 注意,此时对象中的属性值,可以是确定的样式值,也可以是vue的数据变量,
  5. 因此有些值不能再像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>

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

动态绑定style属性.png


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对象, 对象属性的标识符是不支持-连字符的,

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

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

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

<!-- 驼峰式 (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>

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343