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>

 

原文地址：http://www.cnblogs.com/LiuChang-blog/p/16794191.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性