关于点击事件方法的使用(click)

定义vue.js:

 <script src="https://www.atool.online/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="https://www.atool.online/article/vue.js"></script>-->
    <script src="https://www.atool.online/article/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的源码进行分析。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部