Vue基础--数据的单向双向数据绑定_单向数据绑定demo-CSDN博客

本文链接：https://blog.csdn.net/weixin_43847545/article/details/105469163

本文详细介绍了如何在Vue.js中实现双向数据绑定，通过具体的HTML代码示例，展示了如何使用v-model指令来同步输入框的值与组件的数据属性，包括姓名的拆分和组合，以及如何利用计算属性和监视器来实现更复杂的数据处理。

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

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<div id="demo">
		姓:<input type="text" placeholder="firstname" v-model="firstname" /><br/>
		名:<input type="text" placeholder="lastname" v-model="lastname"/><br/>
		姓名(单向1):<input type="text" placeholder="fullname1" v-model="fullname1" /><br/>
		姓名(单向2):<input type="text" placeholder="fullname2" v-model="fullname2" /><br/>
		姓名(双向):<input type="text" placeholder="fullname3" v-model="fullname3"/>
	</div>
	<body>
		<script>
			
			const vm=new Vue({
				el:'#demo',
				data:{
					firstname:'Kobe',
					lastname:'Bryant',
					fullname2:'Kobe Bryant'
				},
				computed:{//计算属性
					/*fullname1(){
						return this.firstname + ' ' + this.lastname
					},*/
					fullname1:{
						get(){
							return this.firstname + ' ' + this.lastname
						}
					},
					fullname3:{
						get(){//回调函数  计算并返回当前属性的值
							return this.firstname + ' ' + this.lastname
						},
						set(value){//监视控件,value为改变后的值
							var names=value.split(' ');
							this.firstname=names[0]
							this.lastname=names[1]
						}
					}
				},
				watch:{//配置监视属性
					firstname:function(val){//val是更新后的值,也可以使用function(newVal,oldVal)
						this.fullname2 = val + ' ' + this.lastname;
					}
				}
			})
			vm.$watch('lastname',function(val){
				this.fullname2= this.firstname + ' ' + val
			})
		</script>
	</body>
</html>