v-bind就是用于绑定数据和元素属性的

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});
<div class="app">
    <a v-bind:href="url">click me</a>
</div>  

注意:
v-bind后面是:属性名=,我的理解是表示绑定这个属性,绑定之后,对应的值要去vue的数据里面找,当然也可以等于一个常数,这样就不用去data里找了。
当我们在控制台改变url时,对应也会变化。
相同的,我们还可以绑定图片src属性、超链接的class

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});
<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>  

另外一种够可以传入一个对象,如下
对象的名active,表示要添加的类名,isActive是vue中的数据,表示在什么情况下添加该类名,对应为真才添加。

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

通常我们可以将v-bind:简写成:

<div class="app">
    <a :class="{active:isActive}">click me</a>
</div>  

绑定HTML Class

一、对象语法:

我们可以给v-bind:class 一个对象,以动态地切换class。注意:v-bind:class指令可以与普通的class特性共存

<ul id="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

CSS代码:

.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

JS代码:

var vm= new Vue({
    el:'#box',
    data:{
        isColor:true,
        isSize:true
    }
})

HTML最终渲染为<ul class="box textColor textSize"></ul>
当 isColor 和 isSize 变化时,class列表将相应的更新,例如,将isSize改成false,class列表将变为 <ul class="box textColor"></ul>

绑定内联样式

一、对象语法

v-bind:style 的对象语法十分直观–非常像CSS,其实它是一个Javascript对象,CSS属性名必须用驼峰命名法(官方文档写的是既可以用驼峰也可以用 短横分隔命名法),但是用短横分隔是会报错的

HTML代码:(这里演示CSS属性名用短横分隔报错)

<div id="box1" :style="{color:activeColor, font-size:size,text-shadow:shadow}">就是帅</div>

JS代码:

var vm= new Vue({
    el:'#box',
    data:{
        activeColor:'#f00',
        size:'30px',
        shadow:'5px 2px 6px #000'
    }
})

报错如下:
报错
当我们按照驼峰命名法的规则去写的时候,一切正常:

HTML代码

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">就是帅</div>

也可以直接绑定到一个样式对象,这样更好,让模板更清晰:

HTML代码:

<div id="box" :style="styleObject">就是帅/div>

JS代码:

var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObject:{
            color:‘red‘,
            fontSize:30px‘
        }
    }
})

二、数组语法

可将多个样式对象应用到一个元素上

HTML代码:

<div id="box" :style="[styleObjectA, styleObjectB]">好好学习,天天向上</div>

JS代码:

var vm2= new Vue({
    el:'#box',
    data:{
        styleObjectA:{
            fontSize:'36px',
            color:'blue'
        },
        styleObjectB:{
            textDecoration:'underline'
        }
    }
})

添加图片SRC地址

给img标签的src属性赋值时,按照传统的方法{{url}}:

HTML代码:

<img id="box" src="{{url}}" >

JS代码:

var vm= new Vue({
    el:'box',
    data:{
        url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
    }
})

此时,图片可以正常显示,但是会报一个404错误,查看控制台可以看到,Vue更加推荐我们使用 v-bind:src
在这里插入图片描述
使用 v-bind:src 再来试试看

HTML代码:

<img class="box" :src="url" >

查看页面截图:
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐