Vue 2.0学习笔记:v-bind

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

经过前面的学习,我们知道v-on可以实现事件绑定,v-model可以实现双向数据绑定。在Vue中除了这两个指令,还有一个v-bind指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。简单说,v-bind是用来绑定HTML属性

JavaScript给HTML标签指定属性

HTML不同的标签具有不同的属性。我们在写标签的时候一般会根据不同的标签指定不同的属性,比如img标签,我们会指定srcalt属性。

<img src="../images/logo.png" alt="w3cplus" />

但我们很多时候需要动态的给HTML标签动态指定属性的值。比如,我们这个imgsrcalt是动态数据data(也就是服务端传过来的)。我们需要借助JavaScript来实现。在JavaScript中,我们有三个方法用来控制元素的属性:

  • Element.getAttribute():获取元素上一个指定的属性值。如果指定的属性不存在,则返回null""(空字符串)
  • Element.setAttribute():指定元素上的一个属性值。如果属性已经存在,则更新该值;否则将添加一个新的属性用指定的名称和值
  • Element.removeAttribute():从指定的元素中删除一个属性

同样拿img标签的srcalt来举例。比如我们有一个默认的图片元素:

<div class="wrapper">
    <img src="//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg" alt="美女与野獸">
</div>
<div class="action">
    <button id="btn">美女与野獸</button>
</div>

// JavaScript
let data = {
    imgInfo: {
        imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/yuesou.jpg',
        alt: '野獸'
    }
}

const imgEle = document.querySelector('.figure')
const btn = document.getElementById('btn')

btn.addEventListener('click', () => {
    imgEle.setAttribute('src', data.imgInfo.imgUrl)
    imgEle.setAttribute('alt', data.imgInfo.alt)  
}, false)

效果如下:

点击按钮就可以把“美女”切换成“野獸”。如下图所示:

v-bind

在Vue中,我们采用今天要学习的v-bind指令,事情会变得更容易的多。那么接下来的内容中,我们会看到如何用v-bind来给HTML的元素绑定属性。

v-bind用法

前面也提到过了,v-bind是Vue的一个指令,主要功能是动态地绑定一个或多个特性,或一个组件props到表达式。常见的使用方式有:

<!-- 绑定一个属性 -->
<img v-bind:src="imgUrl" />

<!-- 缩写 -->
<img :src="imgUrl" />

<!-- 内联字符串拼接 -->
<img :src="'../images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, {classB: isB, classC: isC}]"></div>

<!-- style绑定 -->
<div :style="{fontSize: size + 'px'}"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{id:someProp, 'other-attr': otherProp}"></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>

回到我们最初的示例中来,看看在Vue中怎么通过v-bindi

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-bind.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部