首页 > Web开发 > 详细

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

时间:2019-03-09 15:35:49      阅读:255      评论:0      收藏:0      [点我收藏+]

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>

3.最关心的结果来了,点击真的嘛按钮后就会变成图2哦

技术分享图片

技术分享图片

 

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

原文:https://www.cnblogs.com/Trojan00/p/10500567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!