vue实现数据的双向绑定
程序员文章站
2022-07-12 21:57:46
...
实时同步的是数据双向绑定
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>双向数据绑定 / input / select / textarea </h1>
<label >姓名：</label>
<input ref="name" type="text" v-model="name">
<span>{{name}}</span>
<label >年龄：</label>
<input ref="age" type="text" v-model="age">
<span>{{age}}</span>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//实例化VUE对象
new Vue({
el:"#vue-app",
//仅限于在vue-app容器下
data:{
name:"",
age:""
},
methods:{
/*logName:function(){
//console.log("在此输入你的名字！");
//ref方法也可以实现
this.name = this.$refs.name.value;
},
logAge:function(){
//console.log("在此输入你的年龄！");
this.age = this.$refs.age.value;
}*/
}
});