v-bind用法详解

你真的了解v-bind吗？看完这篇文章你会对v-bind的更多用法有所了解。

Melody_lw

11005人浏览 · 2022-04-11 11:14:23

Melody_lw · 2022-04-11 11:14:23 发布

引言

你真的了解v-bind吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，看完我这篇文章，你会熟悉更多关于v-bind的使用。

详细用法

1.当元素的属性值要求为变量时，我们可以使用v-bind来修饰属性

2.v-bind修饰的属性值里，可以写js表达式

3.当 v-bind的属性值为对象时会将对象展开作为标签的属性，优先级要注意，v-bind赋予的属性优先级始终最低

<div id=2 v-bind="{id:1,name:box}">hhh</div>

<!--以上写法相当于-->
<div id=2 name='box'>hhh</div>

4.修饰符：

.prop - 作为一个 DOM property 绑定而不是作为 attribute(HTML property) 绑定。其中差异看下文。

.camel - 将 kebab-case attribute 名转换为 camelCase。

.sync - 自定义事件的语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。下面有例子说明。

表达式的使用

<div :key='Math.random()+Date.now()'></div>

dom属性和html属性的差异

<body>
<input type="text" value="1" >  
<button>get value</button>

<script>
const input=document.querySelector('input')
document.querySelector('button').addEventListener('click',function(){     //输入2后点击按钮
    console.log(input.value)    //读取dom属性 ，2
    console.log(input.getAttribute('value'))     //读取html属性 ，1
})
</script>
</body>

.sync修饰符的使用

使用场景：如果子组件也需要更新v-bind绑定的属性，使用该修饰符可以省去订阅（自定义事件监听）的代码。注意：这个只能在vue2中使用，vue3中是被摈弃了。

this.$emit('update:title', newTitle)    // 子组件发布信息,'update:prop'是规定写法

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document
  v-bind:title="doc.title"
  @update:title="doc.title = $event"    <--此时 $event 是收到的参数-->
></text-document>

以上写法等同于下面

<text-document v-bind:title.sync="doc.title"></text-document>

作为展开属性用法的变化

采用对象的覆盖形式，更符合人的思维方式

<!--vue2.x-->
<div color='blue' v-bind="{color:'red'}">hh</div>
<!--以上相当于-->
<div color='blue' >hh</div>

<!--vue3.x-->
<div v-bind="{color:'red'}" color='blue'>hh</div>
<!--以上相当于-->
<div color='blue' >hh</div>