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里面的属性值,这里一开始默认为空,所以为空,当改变也跟着改变。


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页