如何为 VueJS 组件创建 v-model 修饰符？

在VueJS中有一些v-model修改预解析绑定值，例如v-model.trim从字符串中删除空格。

如何创建自己的修改器？例如v-model.myparse今天嗯使用类似的东西：

computed: {
  name: {
    get: function () { return parse(this._name);},
    set: function (value) { _name = parse(value);}
  }

什么是非常冗长的。

我希望它可以重复使用来做类似的事情：

<input v-model.myparse="name" name='n1'/>
<input v-model.myparse="name" name='n2'/>
<input v-model.myparse="name" name='n3'/>
<input v-model.myparse="name" name='n4'/>

使用设置器计算的属性似乎完成了部分工作，但它仅对少数几个变量非常有用，对于很多属性它会变得非常冗长。

首先添加添加自定义修改为v-model在下面讨论 https://github.com/vuejs/vue/issues/3666但尚未实施。

如果实施的话，您可以延长v-model并为其添加修饰符。

由于这是不可能的，因此您还有几个选择，其中之一是使用:value而不是 v 模型。因为v-model只是以下语法糖：

  <input type="text" :value="message" @input="message = $event.target.value">

上面的代码等同于：

  <input type="text" v-model="message">

所以，我建议你更换逻辑@input像这样的事情：

现在，您可以使用函数返回修改后的值，如下所示：

methods: {
  getModel ($event) {
    return $event.target.value.trim()
  } 
}

但我提到的所有内容仍然可以通过v-model如果你使用一个函数。

当然，不用说，您可以创建自己的自定义指令 https://v2.vuejs.org/v2/guide/custom-directive.html also.