Advertisement

v-model实现

阅读量:

一、v-model的基础用法
该技术应用于input标签,该标签在功能上类似于子组件。
当触发button事件以修改父组件中的message值时,子组件中input框内的内容将随之发生变化;
而在子组件的input框内对输入值进行调整时,父组件中的message值同样会随之发生改变。

复制代码
    <template>
    	<div>
    		<button @click="changeInput">changeInput</button>
    		<input v-model="message" placeholder="edit me">
    		<p>Message is: {{ message }}</p>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return {
    				message: "plrease input..."
    			}
    		},
    		methods:{
    			changeInput() {
    				this.message = this.message + "1";
    			}
    		}
    	}
    </script>

全部评论 (0)

还没有任何评论哟~