vue.js中v-bind是什么意思?

vue.js中v-bind是什么?怎么用?下面本篇文章给大家介绍一下vue.js中的v-bind语法和使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

v-bind是一个vue指令,主要用于HTML属性绑定,Vue官方提供了一个简写方式 :bind,例如:

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

概述

v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。

示例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

绑定 HTML Class

1、对象语法

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

HTML代码:

<ul class="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
    }
})

1.png

从图中可以看到,HTML最终渲染为 <ul class="box textColor textSize"></ul>

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

也可以直接绑定数据里的一个对象:

HTML代码:

<ul class="box" :class="classObject">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

JS代码:

var vm= new Vue({
    el:‘.box‘,
    data:{
        classObject:{
            ‘textColor‘:true,
            ‘textSize‘:false //不渲染,注意看下面的截图
        }
    }
})

2.png

2、数组语法

我们可以把一个数组传给v-bind:class,以应用一个class列表

HTML代码:

<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

JS代码:

var vm= new Vue({
    el:‘.box‘,
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})

如果想根据条件切换列表中的class,可以用三目运算

HTML代码:

<ul class="box" :class="[isA?classA:‘‘, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

JS代码:

var vm= new Vue({
    el:‘.box‘,
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘,
        isA:false 
    }
})

在这个例子中,首先判断isA的boolean值,如果为true,则渲染classA;如果为false,则不渲染。classB没有做三目运算,所以是始终显示的,看看页面截图

3.png

对于多个class,可以这么写:

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

1、对象语法

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

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

<div id="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>

JS代码:

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

页面报错:

4.png

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

HTML代码:

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">红嘴绿鹦哥</div>

查看页面效果:

5.png

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

HTML代码:

<div id="box" :style="styleObject">红嘴绿鹦哥</div>

JS代码:

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

2、数组语法

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

HTML代码:

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

JS代码:

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

页面效果:

6.png

添加图片SRC地址

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

HTML代码:

<img class="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

7.png

使用 v-bind:src 再来试试看

HTML代码:

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

查看页面截图:

8.png

更多web开发知识,请查阅 HTML中文网 !!

以上就是vue.js中v-bind是什么意思?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏