vue.js点击事件方法的使用(click)
程序员文章站
2022-07-12 13:41:19
...
定义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方法。
输出结果为:
上一篇: Linux笔记(69)——配置软件服务化并开机启动
下一篇: Linux中chkconfig命令总结