当前阅读教程:Vue.JS入门教程 > 方法参数几种使用方式 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 事件中如何读取data里面的数值 | 下一篇: 事件修饰符 |
几种常用方式 //最简易的自增、自减等 v-on:click="x1+=1" //直接跟方法,在方法中调用vue对象的内容作为参数 @click="add" //直接方法后面跟上参数 @click="add2(x1,x2)" 示例下面实例我们演示上面我们提及的几种方式。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js-事件中如何读取data里面的数值</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--使用内联js语句--> <button v-on:click="x1+=1">加1</button> <div>{{x1}}</div> <!--v-on 可以接收一个定义的方法来调用--> <button @click="add">加1</button> <div>{{x2}}</div> <!--v-on 可以接收一个定义的方法(带参数)来调用--> <button @click="add2(x1,x2)">前面两个按钮的点击综合</button> <div>{{x3}}</div> </div> <script> //Vue语句-开始 new Vue({ el: '#app', //app为前面div区块的id的值,通过"#"号绑定 data: { x1:0, //属性初始化 x2:0, //属性初始化 x3:0 //属性初始化 }, methods:{ //自定义方法 add:function(){ this.x2=this.x2+1; }, //自定义方法(带参数) add2:function(cs1,cs2){ this.x3=cs1+cs2; } } })//Vue语句-结束 </script> </body> </html> 效果图 |
|
上一篇: 事件中如何读取data里面的数值 | 下一篇: 事件修饰符 |