Vue数据绑定

本文详细探讨了Vue.js中的数据绑定机制,包括如何使用v-bind和v-model指令实现视图与模型之间的双向数据同步,以及在实际开发中如何有效地利用这一特性进行状态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Vue中有两种数据绑定方式
		 1、单向绑定(v-bind):数据只能从data流向页面
		 2、双向绑定(v-model):数据可以从data流向页面也可以从页面流向data
		 备注:双向绑定一般都应用再表单元素上,因为只有表单元素具有数据属性。	
		 -->
		<!-- 完成数据绑定 -->
		<div id="nav">
			<!-- 单项数据绑定仅仅为vue实例 -->
			单向数据绑定:<input type="text" v-bind:value="name" /><br />
			双向数据绑定:<input type="text" v-model:value="name" /><br />
			<!-- 简写 -->
			单向数据绑定:<input type="text" :value="name" /><br />
			双向数据绑定:<input type="text" v-model="name" />
		</div>
		<div id="root">
			<hr/>
			<h1>第二指定容器写法:{{name}}</h1>
		</div>
		<script type="text/javascript">
			//阻止vue再启动时生成生产提示
			Vue.config.productionTip = false;
			new Vue({
				el: '#nav',
				data: {
					name: '张三',
				}
			})
			/* 第二种写法 函数式 */
			const v = new Vue({
				data:function(){
					return {
						name:"李斯何许人也"
					}
				}
			})
			console.log(v);
			setTimeout(()=>{
				v.$mount("#root")
			},1000)
		</script>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值