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哦