Vue基础--数据的单向双向数据绑定

最新推荐文章于 2024-05-14 07:25:43 发布

长耳朵的鱼鱼

最新推荐文章于 2024-05-14 07:25:43 发布

阅读量110

点赞数

分类专栏： Vue学习笔记

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

版权

Vue学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<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>

长耳朵的鱼鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础--数据的单向双向数据绑定

<html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <div id="demo"> 姓:<input type="tex...
复制链接

扫一扫