v-model原理

v-model原理

  • 概述

    v-model 相当于:value和@input的结合

  • 使用

    <!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>v-model原理</title>
</head>
<body>

<div id="app">
	<label for="">
		v-model：
		<input type="text" v-model="str">
	</label>
	<label for="">
		手动实现v-model：
		<input type="text" :value="str" @input="input">
	</label>
	<h2>{{ str }}</h2>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	app = new Vue({
		data:{
			str: ""
		},
		methods:{
			input(event){
			   this.str = event.target.value
			}
		}
	}).$mount('#app')
</script>

</body>
</html>
posted @ 2020-06-12 15:45  ResJI  阅读(59)  评论(0)    收藏  举报