05方法的使用

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>05方法的使用</title>
 9     <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.prod.js"></script>
10 </head>
11 <body>
12     <div id = "app">
13         <!--v-on 事件指令调用方法，省略写法为"@:"-->
14         <div v-text="name" v-on:click="add"></div>
15         <!--阻止默认行为地址跳转(通过方法)-->
16         <a href="https://www.baidu.com" v-text="name" @:click="go"></a>
17         <hr>
18         <!--阻止默认行为地址跳转(通过点方法)-->
19         <a href="https://www.baidu.com" v-text="name" @:click.prevent="go1"></a>
20         <hr>
21         <!--传参-->
22         <a href="https://www.baidu.com" v-text="name" @:click.prevent="go2($event,'大地')"></a>
23         <hr>
24         <!--自动增加-->
25         <button @click="desc">减少</button>{{num}}<button @click="add">增加</button>
26         <!--v-if事件指令判断是否-->
27         <div style="background-color: red;color: white" v-if="error">提示: {{error}}</div>
28     </div>
29 
30 <script>
31     let app = Vue.createApp({
32         data() {
33             return {
34                 name: 'vue开发',
35                 num: 1,
36                 error: "",
37             };
38         },
39         methods:{
40             add(){
41                 // this表示当前的组件(当前是根组件，即下面的vm)
42                 this.error='';
43                 if (this.num < 10) {
44                     this.num++;
45                 } else{
46                     this.error="不能大于10";
47                 }
48             },
49             desc() {
50                 this.error='';
51                 if (this.num > 0) {
52                     this.num--;
53                 }else {
54                     this.error="不能小于0";
55                 }
56             },
57             go(event){
58                 // 方法默认不传参时第一个参数为 event
59                 event.preventDefault();
60             },
61             go1(event){
62             },
63             go2(event,title){
64                 alert(title);
65             },
66         },
67     });
68 
69     let vm = app.mount('#app');
70 </script>
71 </body>
72 </html>