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

Question

在 VueJS 中有一些 v-model修改预解析绑定(bind)值，例如 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在 discussion 下但尚未实现。

如果已实现，您可以扩展 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 完成。如果你使用一个函数。

当然不用说了，你可以自己创建custom directive还。