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

Question

在 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'/>

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

Answer 1

首先，添加自定义修改正在讨论v-model中，但尚未实现。

如果实现了，您可以扩展v-model并为其添加修饰符。

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

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

上面的代码等同于：

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

因此，我建议您将 的逻辑替换为@input如下所示：

<输入类型=“文本”：值=“消息”@输入=“getModel”>

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

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

v-model但如果您使用函数，我提到的所有内容仍然可以完成。

当然，不用说，您也可以创建自己的自定义指令。