Vue学习（五）

最新推荐文章于 2023-12-13 12:42:39 发布

Siyucat

最新推荐文章于 2023-12-13 12:42:39 发布

阅读量150

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42475953/article/details/80934173

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<!--vue-app是根容器-->
  <div id="vue-app">
	<h1> 双向数据绑定 /input/select/textarea </h1>
	<label>姓名：</label>
	<input ref="name" type="text" v-on:keyup="logName" v-model="name">
	<span>{{ name }}</span>
	<label>年龄：</label>
	<input ref="age" type="text" v-on:keyup="logAge" v-model="age">
	<span>{{ age }}</span>
    
  </div>
   <script  src="app.js"></script>

</body>
</html>

app.js

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