<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>双向数据绑定/input/select/textarea</h1>
<label for="">姓名：</label>
<input ref="name" type="text" v-on:keyup="logName" />
<input ref="name" type="text" v-model="name" />
<span>{{name}}</span>
<label for="">年龄：</label>
<input ref="age" type="text" v-on:keyup="logAge" />
<span>{{age}}</span>
</div>
</body>
</html>
<script>
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;
}
}
})
</script>
网友评论