Vue.js随笔四(方法的声明和使用)

最新推荐文章于 2023-05-16 09:16:04 发布

weixin_34014277

最新推荐文章于 2023-05-16 09:16:04 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Trojan00/p/10500567.html

本文详细介绍如何在Vue.js中通过按钮触发事件更新数据。从新建路由到在.vue文件中添加methods，再到使用v-on:click或@click绑定事件，一步步展示如何使按钮点击后修改页面文本，实现动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先你需要新建路由，这个就不多说了

2.然后在你的新的.vue里面需要如下所示的添加methods：{方法}，然后按钮的里面你会看到v-on:click，这就是点击这个按钮会触发的动作，这个就是触发methods里的highlight函数，当然v-on:click也可以写成@click这两个是一样的

 1 <html>
 2 <head>
 3     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 4 </head>
 5 <body>
 6     <div id='app'>
 7         {{ message }}
 8         <br/>
 9         <button v-on:click='highlight' style='margin-top: 50px'>真的吗</button>
10     </div>
11 
12     <script>
13         var app = new Vue({
14             el: '#app', 
15             data: {
16                 message: '学习Vuejs使我快乐~ '
17             },
18             methods:  {
19                 highlight: function() {
20                     this.message = this.message + '是的， 工资还会涨~!'
21                 }
22             }
23 
24         })
25     </script>
26 </body>
27 </html>