vue.js(8)双向数据绑定

双向数据绑定:一定要有一个输入的地方,一定要有一个输出的地方

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
	<label>姓名:</label>
	<input ref="name" type="text" @keyup="logname">
	{{ name }}
	<br/>
	
	<label>年龄:</label>
	<input type="text" v-model="year">
	{{ year }}
	<br/>	
</div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:
	{
		name:"",
		year:"",
	
	},
	
	methods:
	{
		logname:function()
		{
			this.name=this.$refs.name.value;
		},		
		
	}
});
第一种方法的ref,相当于php中设定name,然后提交表单的传值,这里的ref的名字就是js中data的属性,所传值用
this.name=this.$refs.name.value;

来接受值,然后呈现


第二种方法,v-model,v-model自动接受data里面的属性值,这里一开始默认为空,所以为空,当改变也跟着改变。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值