vue.js中关于点击事件方法的使用(click)
更新时间：2022年08月02日 15:39:39 作者：你的美，让我痴迷
这篇文章主要介绍了vue.js中关于点击事件方法的使用(click)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
关于点击事件方法的使用(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的源码进行分析。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
之前只是浅显的使用插件进行vue开发展示,最近深入的研究了下,下面这篇文章主要给大家介绍了关于Vue3兄弟组件传值之mitt的超详细讲解,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue 实现双向绑定的四种方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了使用vant-uploader上传照片无法删除的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
$是在vue中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突,下面这篇文章主要给大家介绍了关于vue中$含义及其用法的相关资料,需要的朋友可以参考下2023-04-04
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
这篇文章主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了vue自定义指令directive的相关资料，下面通过实例给大家介绍,需要的朋友可以参考下2018-01-01
本文主要介绍了Vue实现PC端分辨率自适应的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了vue中filter的应用场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了Vue中的ref作用详解(实现DOM的联动操作),需要的朋友可以参考下2017-08-08
最新评论