vue.js数据双向绑定示例

最新推荐文章于 2024-04-12 15:32:24 发布

mischen520

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量345

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/miachen520/article/details/115587616

版权

vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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;
		}		
	}
	
});

页面效果：