衡阳城乡建设部网站首页it培训机构培训费用
v-model原理
- 简介
- v-model应用在输入框上
- v-model应用在组件上
简介
由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。
应用在组件上由 props: {value: xxx } ，this.$emit(‘input’, xxx ) 完成。
v-model应用在输入框上
<body><div id="app"><input type="text" v-model="msg"><!-- 等同于 --><input type="text" :value="msg1" @input="msg1 = $event.target.value"><div>{{ msg }}</div><div>{{ msg1 }}</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {msg: '123',msg1: 'abc',},methods: {},computed: {},});</script>
</body>
- 数据更新时，需要页面同步更新：Vue属性绑定实现；
- 页面更新时，需要数据同步更新：监听input事件实现；
v-model应用在组件上
<body><div id="app"><div>v-model 父组件：{{modelInputText}}</div><component-model v-model="modelInputText"></component-model></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 注册全局组件Vue.component('component-model', {template: `<div><input type="text" :value="value" @input="updateVal" /><br /><span>v-model的子组件：{{value}}</span></div>`,props: ['value'],data: function () {return {text: 'componentOneText'}},methods: {updateVal(event) {this.$emit('input', event.target.value);}}})var app = new Vue({el: '#app',data: {modelInputText: 'hello v-model !',},methods: {},computed: {},});</script>
</body>
- 数据更新时，需要父组件同步更新：this.$emit(‘input’, xxx )；
- 父组件更新时，需要子组件同步更新：props: {value: xxx }；