汕头整站优化,营销推广网,婚庆网站开发工具,基本网页设计v-model原理 简介v-model应用在输入框上v-model应用在组件上 简介
由 属性绑定(v-bind:value“searchText”) 配合 input事件监听(v-on:input“searchText event.target.value”) 实现。 应用在组件上由 props: {value: xxx } #xff0c;this.$emit(‘input’, xxx ) 完成。… 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应用在输入框上
bodydiv idappinput typetext v-modelmsg!-- 等同于 --input typetext :valuemsg1 inputmsg1 $event.target.valuediv{{ msg }}/divdiv{{ msg1 }}/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {msg: 123,msg1: abc,},methods: {},computed: {},});/script
/body数据更新时需要页面同步更新Vue属性绑定实现页面更新时需要数据同步更新监听input事件实现
v-model应用在组件上
bodydiv idappdivv-model 父组件{{modelInputText}}/divcomponent-model v-modelmodelInputText/component-model/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscript// 注册全局组件Vue.component(component-model, {template: divinput typetext :valuevalue inputupdateVal /br /spanv-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 }
