vue.js点击事件方法使用
你的美,让我痴迷 人气:0关于点击事件方法的使用(click)
定义vue.js:
<script src="../js/vue.min.js"> </script>
也可以使用网上的:
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
都可以。
定义方法:
let vm=new Vue({ el:"#jincaipinlun", data:{ message:"", }, // 点击头像查看详情 methods: { makereplyName: function(item){ alert(item); mui.openWindow({ id:13, url:'myself.html', extras:{ userName: item } }); }, makebeReplyName: function(item){ alert(item); mui.openWindow({ id:13, url:'myself.html', extras:{ userName: item } }); } , } });
mui页面显示:
<div data-am-widget="tabs" id="jincaipinlun" class="am-tabs am-tabs-default pet_comment_list_tab am-no-layout"> <div class="am-tabs-bd pet_pl_list" v-for="data in message" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <div><div class="pet_comment_list_block"> <a > <div class="pet_comment_list_block_l" v-on:click="makereplyName(data.userName)"> <img v-bind:src=data.img alt=""> </div></a> <div class="pet_comment_list_block_r"> <div class="pet_comment_list_block_r_info">{{data.replyName}}</div> <div class="pet_comment_list_block_r_text" style="vertical-align: middle;" v-html=data.content> </div> <div class="pet_comment_list_block_r_bottom"> <div class="pet_comment_list_bottom_info_l">{{data.time}}</div></div> </div></div> <div class="pet_comment_list_block" v-for="item in data.replyBody"> <a > <div class="pet_comment_list_block_l" v-on:click="makebeReplyName(item.userName)"> <img v-bind:src=item.img alt=""> </div></a> <div class="pet_comment_list_block_r"> <div class="pet_comment_list_block_r_info">{{item.replyName}}</div> <div class="pet_comment_list_block_r_text"> <span>@{{item.beReplyName}}</span><span style="color: rgb(34, 34, 34);" v-html=item.content></span> </div> <div class="pet_comment_list_block_r_bottom"> <div class="pet_comment_list_bottom_info_l">{{item.time}}</div></div> </div></div></div> </div> </div>
提出重要的方法使用为:
<div class="pet_comment_list_block_l" v-on:click="makereplyName(data.userName)"> <div class="pet_comment_list_block_l" v-on:click="makebeReplyName(item.userName)">
也就是我们提到的:
makereplyName,makebeReplyName方法。
输出结果为:
vue点击click事件解析
vue算是前端技术比较火的一门技术了,所以在日常开发当中掌握它还是比较重要的,最近要用vue做一个移动端项目,趁着空闲的时间来简单的写一下demo:
废话不多说,先上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="./vue.js"></script>--> <script src="2.5.20-vue.js"></script> </head> <body> <div id="app"> //@click点击事件getMethod和getMethod()带不带小括号其实没多大的区别,vue在底层会把传过去的函数统一解析成为方法,带小括号说明有相应的实参传入方法体里面; <!--<p @click="getMethod">aaaa</p>--> <!--<p @click="getMethodFun">aaaa</p>--> <p @click="getMethod()">aaaa</p> <p @click="getMethodFun()">bbbb</p> </div> </body> <script> var app = new Vue({ el: '#app', data: function () { return { message: 'father', show: true }; }, methods: { getMethod () { //点击事件的时候去寻找相应的方法,在底层做转换直接写方法名,大括号里面写相应的业务逻辑 console.log('11'); }, //也可以采用匿名函数的写法定义方法名,然后进行调用这种方法也是可以的,只不过getMethod ()的写法更加简洁,但是在实际开发当中这个可是不支持的例如 aaFunc (){} //直接这样写是会报错的,一定要注意; getMethodFun: function () { console.log('22') } }, }); </script> </html>
简单分析到这里,大家也可以追一下vue的源码进行分析。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容