jQuery火箭图标返回顶部代码

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

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哦

 

posted @ 2019-03-09 14:08  迷途纸鸢  阅读(633)  评论(0编辑  收藏  举报