1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="vue-app">
10 <h1>双向数据绑定 /input / select /textarea</h1>
11 <label>姓名:</label>
12 <!-- <input type="text" @keyup.enter="logName"> -->
13 <input ref="msg" type="text" v-on:keyup="logName">
14
15 <input type="text" v-model="name">
16 <p>{{ name }}</p>
17 <label>年龄</label>
18 <input ref="age" type="text" v-on:keyup="logAge">
19 <span>{{ age }}</span>
20 </div>
21
22
23 <script src="app.js"></script>
24 </body>
25 </html>
数据双向绑定 HTML
1 new Vue({
2 el:‘#vue-app‘,
3 data:{
4 name:‘‘,
5 age:‘‘
6 },
7 methods:{
8 logName:function(){
9 //console.log(‘你在输入名称‘);
10 // this.name=this.$refs.name.value;
11 console.log(this.$refs.msg.value)
12 },
13 logAge:function(){
14 // console.log(‘你在输入年龄‘);
15 this.age=this.$refs.age.value;
16 }
17 }
18 })
Vue.js
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9458003.html
时间： 2024-11-09 10:27:36