详谈Vue的事件绑定

v-on指令可以绑定DOM事件，触发时运行一些JavaScript代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件绑定</title>
 6     <!--  1、导入Vue.js  -->
 7     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
 8 </head>
 9 <body>
10 <!-- view层 模板 -->
11 <div id="app">
12     <h1>{{str}}</h1>
13     <!--  这里通过v-on绑定了按钮的单击事件  -->
14     <button v-on:click="reverseStr">反转字符串</button>
15 </div>
16 
17 <script type="text/javascript">
18     /*
19         vue对象中的data属性相当于java类对象中的成员变量, methods属性相当于java类对象中的
20         成员方法(或者也可以理解为java中的事件)，vue中的属性都定义在data中，事件都定义在methods
21         中。
22     */
23     let vue = new Vue({
24         el: "#app",
25         data: {
26             str: "Vue is Very Good"
27         },
28         methods: {
29             // 绑定一个单击事件，功能为反转字符串
30             reverseStr: function () {
31                 // 这里先调用String的split()方法，然后再调用数组的reverse()方法进行反转，最后再调用数组的join()方法进行拼接成字符串
32                 this.str = this.str.split('').reverse().join('');
33             }
34         }
35     });
36 </script>
37 </body>
38 </html>

 

posted @ 2021-03-08 17:23  没有你哪有我  阅读(250)  评论(0)  编辑  收藏  举报