如何在 vue 中更改 vue v-model 语法

Question

我在 vue.js 中有一个小任务，我想将 v-model 的语法更改为 model，或者使用 webpack 和 vue-loader 进行其他操作。我尝试了指令，但这不是我需要的。

这是我的例子：

<input v-model="anyVarible">
<input model="anyVarible">

Answer 1

v-model 只是设置和获取数据的语法糖 - 为所有输入类型准备：

您可以使用 v-model 指令创建双向数据绑定 表单输入、文本区域和选择元素。它会自动选择 根据输入类型更新元素的正确方法。 虽然一个 有点神奇，v-model 本质上是用于更新数据的语法糖 用户输入事件，以及对某些边缘情况的特殊照顾。

来源：Vue 2 v-model

这意味着，您可以将v-model 更改为其他内容，但您必须处理这些情况：

new Vue({
  el: "#app",
  data() {
    return {
      vmodeltext: null,
      modeltext: null,
      vmodelcb: null,
      modelcb: null,
    }
  },
  methods: {
    handleInputText({
      target: {
        value
      }
    }) {
      this.modeltext = value
    },
    handleInputCb({
      target: {
        checked
      }
    }) {
      this.modelcb = checked
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="vmodeltext" /><br /> With v-model: {{ vmodeltext }}<br />
  <hr />
  <input type="text" :value="modeltext" @input="handleInputText($event)" /><br /> With modeltext: {{ modeltext }}<br />
  <hr />
  <input type="checkbox" v-model="vmodelcb" /><br /> With v-model: {{ vmodelcb }}<br />
  <hr />
  <input type="checkbox" :checked="modelcb" @change="handleInputCb($event)" /><br /> With modelcb: {{ modelcb }}<br />
</div>

因此，基本上您不需要使用 Webpack 或加载器更改 v-model - 只需按照您需要的方式编写代码即可。