vue v-bind修饰符 & v-model修饰符

v-bind修饰符

.sync

对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

使用sync的时候，自组件传递的事件名必须格式必须为update:value, 其中value必须与自组件中props中声明的名称完全一致

注意: 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

---

.prop

设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

---

 .camel

将命名变为驼峰法命名法，如将view-box属性名转换为viewBox

<svg :viewBox="viewBox"></svg>

v-model修饰符

.trim

用来过滤输入的前后空格

<input v-model.trim="msg">

---

.number

将字符串转化为数字，并且在失去焦点时将非数字删除

注意： 在输入框开头输入非数字是无法将字符串转化为数字的，依旧会默认输出，所以不要将其当成input的Number类型运用

---

 .lazy

改变v-model的语法糖，原本监听input事件:

<input v-model="value"/>
//等同于
<input :value="value"  @input="value=$event.target.value"/>

使用.lazy修饰符后监听change事件:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="value"/>
//等同于
<input :value="value"  @change="value=$event.target.value"/>