vue.js数据双向绑定示例

vusjs数据双向绑定指令为：v-model，具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue.js 学习</title><link rel="stylesheet" href="style.css"><script src=

mischen520

368人浏览 · 2021-04-11 01:20:04

mischen520 · 2021-04-11 01:20:04 发布

vusjs数据双向绑定指令为：v-model，具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>vue.js 学习</title>
		<link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
        <div id="app">
		    <h1> 双向数据绑定 适用于/input/select/textarea </h1>
			<label>姓名：</label>
			<!--绑定enter事件 -->
			<input  ref="name" type="text" v-model="name">
			<span>{{name}}</span>
			<label>年龄：</label>
			<!--绑定alt+enter事件 -->
			<input ref="age" type="text" v-model="age">
			<span>{{age}}</span>
		</div>
		<script src="app.js"></script>
    </body>
</html>

//实例化vue对象
new Vue({
	el:"#app",
	data:{
	   name:"",
	   age:""   
	},
	methods:{
		logName: function(){
			//console.log("你正在输入名字！");
			this.name = this.$refs.name.value;
		},
		logAge: function(){
			//console.log("你正在输入年龄！");
			this.age = this.$refs.age.value;
		}		
	}
	
});

页面效果：