最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案,

新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更好的方法解决这个事情

需求:根据每列传递的参数,决定弹窗后面是积分够了去直接购买还是不够需要去转换

二、页面代码[无法可传的参数,我把它放进了一个自定义标签date-id]

<div class="ticket-main">
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg weui_media_box_bg" v-for="item in mediaBox" :date-id="item.num" v-on:click="upHref($event)">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" :src="item.mediaBoxImg" alt="" />
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title" v-text="item.name">双色球彩票一注</h4>
<p class="weui_media_desc"><span class="icon icon-2"></span><span v-text="item.price"></span>钡</p>
</div>
</a>
</div>

三、js代码

var secretRecipe = new Vue({
el: "#secret-recipe",
data: {
pointsNum: [],
mediaBox:[]
},
methods:{
upHref:function(e){
hrefSrc(e.currentTarget);
}
}
});
var prize=[
{mediaBoxImg:"../b2b-reception/images/secret/icon_01.png",name:"双色球彩票一注",price:'250',num:"1"},
{mediaBoxImg:"../b2b-reception/images/secret/icon_02.png",name:"50M流量",price:'230',num:"2"},
{mediaBoxImg:"../b2b-reception/images/secret/icon_03.png",name:"景点抽抽乐",price:"300",num:"3"}
];
$(function(){ secretRecipe.mediaBox = prize; }) function hrefSrc(v){
console.log($(v).attr("date-id"));
$.modal({
title: "支付方式",
text: "选择你的支付方式",
buttons: [
{ text: "转化积分", onClick: function(){ $.alert("你选择了转化积分"); } },
{ text: "立即购买", onClick: function(){ $.alert("你选择了立即购买"); } },
{ text: "取消", className: "default"},
]
});
}

重点说明:$event,官方文档中是说该对象【在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"。】

handle(e){e.currentTarget}方法接收时取的是点击的该DOM本身

handle(e){e.target}方法接收时取的是点击的该元素

handle(e){e.target.tagName}方法接收时取的是点击的该元素的标签名(如div.p.img)

vue v-on:click传递动态参数的更多相关文章

  1. vue微信分享链接添加动态参数

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...

  2. 微信小程序for循环中传递动态参数

    for循环中的参数,没法传到对应的 js里,所以直接在 wxml页面上跳转 发送参数的 wxml页面 <view class="uploader" wx:for=" ...

  3. 关于Ext4 extraParams 不能传递动态参数的问题解决办法

    可以监听请求发送之前的事件:beforeload ,然后再添加请求的参数 me.store = Ext.create('Ext.data.JsonStore', { remoteSort: true, ...

  4. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  5. function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下:     1.show(*args) def show(*args): print(args,type(arg ...

  6. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  7. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

  8. Vue.js Ajax动态参数与列表显示

    一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...

  9. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

随机推荐

  1. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

  2. vue.js笔记1.0

    事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...

  3. i2c drivers

    Linux设备驱动程序架构分析之一个I2C驱动实例   转载于:http://blog.csdn.net/liuhaoyutz 内核版本:3.10.1   编写一个I2C设备驱动程序的工作可分为两部分 ...

  4. HDU 5536 Chip Factory Trie

    题意: 给出\(n(3 \leq n \leq 1000)\)个数字,求\(max(s_i+s_j) \bigoplus s_k\),而且\(i,j,k\)互不相等. 分析: 把每个数字看成一个\(0 ...

  5. 03009_HttpServletResponse

    1.HttpServletResponse概述 (1)我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有两个参数,一个为代表请求的request和 ...

  6. splay模板三合一 luogu2042 [NOI2005]维护数列/bzoj1500 [NOI2005]维修数列 | poj3580 SuperMemo | luogu3391 【模板】文艺平衡树(Splay)

    先是维修数列 题解看这里,但是我写的跑得很慢 #include <iostream> #include <cstdio> using namespace std; int n, ...

  7. ogre3D学习基础8 --- 资源管理器

    资源管理 可管理的资源有: 材质资源:在.material文件中包含的材质脚本定义(技术.通路.纹理单元等数据的定义). 模型资源:经过优化的二进制网格模型文件,扩展名为.mesh.包含几何信息和一些 ...

  8. day01_14.遍历数组

    <?php $a = array('a','b','c'); print_r($a); ?> 输出结果:Array ( [0] => a [1] => b [2] => ...

  9. SCOI 2010 滑雪

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着 MM 条供滑行的轨道和 NN 个轨道之间的交点(同时也是景点),而且每个景点都有一编号 ii ( 1 \le i \le N1≤i≤N ...

  10. Emacs 安装与体验

        Emacs 安装与体验 下载与安装 首先是下载最新的x64版本的Emacs. 将下载下来的文件解压到你喜欢的磁盘目录下,我选择的是C:\Program Files.放在D盘可能是更好的选择,因 ...