当前位置：网站首页>3. Data binding

3. Data binding

2022-07-03 19:38:00 【Shura MIUI】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Data binding </title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!--  Instruction syntax binding value name -->
			<!-- v-bind Is one-way , Data can only be obtained from data Flow page  -->
			 One way data binding <input :value="name" />
			<br>
			 Two way data binding <input v-model="name" />
			<!-- v-model When bidirectional , Sure data-> page , You can also page ->data -->
			<!--  The following code is wrong ,v-model Can only be applied to form classes input Equal elements  -->
			<!-- <h2 v-model="name">hello</h2> --> 
			<!-- v-model:value I could just write it as v-model, because v-model Default collection value value  -->
			<input type="text" v-model="name"/>
			<!-- and v-bind In general use ':',v-model:value In general use v-model -->
		</div>
	</body>
</html>

<script type="text/javascript">
	Vue.config.productionTip = false;
	new Vue({
    
		el: '#root',
		data: {
    
			name: 'jack',
		}
	})
</script>
原网站

版权声明
本文为[Shura MIUI]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150128090050.html

边栏推荐

猜你喜欢

随机推荐