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的是discussion，但尚未实施。

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

由于这是不可能的，你还有几个选项，其中一个选项是使用:value而不是v-model。因为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。

如何为VueJS组件创建v模型修改器？

1 个答案: