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
