vue中v-bind的基本使用

Hushhhhh
212 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前言

在vue中我们除了使用插值语法来读取data里的值还可以使用v-bind指令来读取，例如img标签是通过src属性将图片展示出来，当data里的值存放着图片路径的时候我们是不能通过插值语法来绑定src属性的，这时就要通过v-bind来绑定src属性了

v-bind就是用来动态绑定某些属性的，例如a标签额度href属性，img标签的src属性等等，v-bind可以缩写为 :

v-bind的基本使用

在data里存放着一张图片的路径，通过v-bind或者:来使图片路径和src属性绑定，vue实例会解析这个指令动态的为属性绑定上data里的数据

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

data:{
    imgurl:'https://v2.cn.vuejs.org/images/logo.svg'
},

运行到浏览器可以看到图片出来了，

图片.png

图片.png

v-bind绑定样式

v-bind用来绑定属性，而样式也是经常会用到v-bind来绑定的，我们一般给元素加上样式都是直接使用class

<style>
    .active{
        color: pink;
    }
</style>
    
<div class="active">未绑定</div>

使用v-bind的方式是这样的，运行到浏览器上效果是一样的，但是这样更灵活

<div class="active">未绑定</div>
<div :class="className">已绑定</div>

data:{
    className:'active'
},

图片.png

因为当我们需要动态设置样式的时候例如有时候是样式一有时候是样式二，使用v-bind就可以轻松解决，但是语法上和上面的不同，上面的是字符串的形式，动态设置样式使用对象的形式，可以在里面存放键值对key value，key一般放的是类名，后面跟上布尔值，布尔值为true的时候类名就会被添加到标签上，为false的时候就不会添加

<div :class="{active1:bool1,active2:bool2}"></div>

data:{
    bool1:true,
    bool2:false
},

可以看到类名active2没有添加到标签上

图片.png

除了对象语法以外还有数组语法，给:class绑定一个数组，应用一个class列表

<div :class="[active,line]"></div>

也可以使用三元表达式来根据条件切换class

<div :class="[isActive ? active : '',errorCls]">测试文字</div>

data:{
    active:true
},

除了class，style也是可以使用v-bind来绑定的，方法与绑定class类似，也有对象语法和数组语法，很像直接在元素上写css

<div id="app">
    <div :style="{'color':color, 'fontSize':fontSize+'px'}">text文字</div>
</div>

data:{
    color: 'red', fontSize: 50
},
avatar
文章
阅读
粉丝