1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>事件绑定</title> 9 </head> 10 11 <body> 12 <div id="div"> 13 <div>{{name}}</div> 14 <button v-on:click="change()">改变div的内容</button> 15 <button v-on:dblclick="change()">改变div的内容</button> 16 17 <button @click="change()">改变div的内容</button> 18 </div> 19 </body> 20 <script src="../js/vue.js"></script> 21 <script> 22 new Vue({ 23 el: "#div", 24 data: { 25 name: "李四" 26 }, 27 methods: { 28 change() { 29 this.name = "王二" 30 } 31 } 32 }); 33 </script> 34 35 </html>