Vue-双向数据绑定

双向数据绑定的源代码

<body>
		<div id="app">
			<p>{{data1}}</p>
			<input name="" id="" :value="data1" @input="fn">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				data1:"123456"
			},
			methods:{
				fn(e){
					this.data1=e.target.value
				}
				
			}
		})
	</script>

　　Vue实现双向数据绑定代码

　　v-model

<body>
		<div id="app">
			<p>{{data1}}</p>
			<input type="text" v-model="data1">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				data1:"123456"
			}
		})
	</script>

　　

posted @ 2022-09-05 23:17  前端小白银  阅读(29)  评论(0)    收藏  举报