vue.js点击事件方法的使用（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方法。

输出结果为：