Back

javascript - 某些时候,无法使用 object.attr 来双向绑定 checkbox 的时候,要理解 v-model是一个语法糖

发布时间: 2021-06-15 06:43:00

参考;https://forum.vuejs.org/t/what-is-the-syntactic-sugar-for-v-model-on-select-element/5912

v-model其实是个语法糖,

<input v-model="something"> is really just syntactic sugar for <input v-bind:value="something" v-on:input="something = $event.target.value">.

所以,v-model不好用的时候,我们需要,把它做个转换

v-model -> v-bind:value (负责根据代码中的变量来显示输入框的值),  v-on:input (负责在用户输入之后,动态改变代码中的值)

例子

              <input type="text" v-model="category.weight" class='el-input__inner'
                style='width: 100px; height: 22px' placeholder='e.g. 0.32' />

等同于
              <input type="text" v-bind:value="category.weight" v-on:input="change_value($event, category)" class='el-input__inner'
                style='width: 100px; height: 22px' placeholder='e.g. 0.32' />

    change_value(event, category){
      category.weight = event.target.value
    },

Back