vue.js（8）双向数据绑定

最新推荐文章于 2024-09-21 09:40:07 发布

谢西顾

最新推荐文章于 2024-09-21 09:40:07 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80330694

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

//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的属性，所传值用