欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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方法。

输出结果为:

vue.js点击事件方法的使用(click)
vue.js点击事件方法的使用(click)