17.v-model和.sync

34 阅读1分钟

v-model本质上是一个语法糖,在大部分情况下,** v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event";**

原生的input的@input的输入中文也会数据及时响应,v-model做了优化,输入中文时只会空格之后响应数据

<div id="app">

<input v-model="test">

<!-- <input :value=``"test"` `@input=``"test= $event.target.value"``> --><!--语法糖-->

</div>
<script src="/resources/js/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
    test:  '这是一个测试'
    }
});
</script>

vue2不支持多个v-model,采用.sync来使用多个数据双向绑定

<my :value.sync="XXX" :value2sync="XXX2</my>

vue3废除了sync语法糖,可以使用v-model:a="xxx",v-model:a="xxx",来绑定多个响应式数据