如何為 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並為其添加修飾符。

由於這是不可能的，因此您還有幾個選擇，其中之一是使用:value而不是 v-model。 因為v-model只是以下的語法糖：

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

上面的代碼與以下代碼相同：

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

因此，我建議您將@input的邏輯替換為以下內容：

<input type="text" :value="message" @input="getModel">

現在，您可以使用函數將修改后的值返回為：

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

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

當然不用說，您也可以創建自己的自定義指令。