vue v-on:click传递动态参数
最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案,
新手只能用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传递动态参数的更多相关文章
- vue微信分享链接添加动态参数
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...
- 微信小程序for循环中传递动态参数
for循环中的参数,没法传到对应的 js里,所以直接在 wxml页面上跳转 发送参数的 wxml页面 <view class="uploader" wx:for=" ...
- 关于Ext4 extraParams 不能传递动态参数的问题解决办法
可以监听请求发送之前的事件:beforeload ,然后再添加请求的参数 me.store = Ext.create('Ext.data.JsonStore', { remoteSort: true, ...
- vue嵌套路由-query传递参数(三)
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- function(函数)中的动态参数
我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(arg ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- vue.js中路由传递参数
知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...
- Vue.js Ajax动态参数与列表显示
一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...
- vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...
随机推荐
- linux文件属性之linux文件删除原理
Linux是通过link的数量来控制文件删除的,只有当一个文件不存在任何link的时候,这个文件才会被删除.一般来说,每个文件都有2个link计数器:i_count和i_nlink. i_count的 ...
- 解决iPhone滑动不流畅问题
前段时间在做一个手机端的页面时遇到了iOS上滑动不流畅的问题,后来才发现安卓上没有问题,才意识到这是兼容性问题引起的,所以遇到问题后快速定位到问题根源非常重要.在网上一搜就找到了解决方案.以后遇到类似 ...
- 【php】【异步】php实现异步的几种方法
请参考 4种php常用的异步执行方式 ajax 和 img 的 src 属性 系统指令调用 (在php代码里面调用系统指令) curl socket通信
- Ubuntu系统里的python
Ubuntu系统里,默认安装python2.7.x版本的python,直接执行python命令,打开的将是python 2.7.x版本:python3版本的需要自行安装,安装成功后,执行python3 ...
- Linux学习-X Server 配置文件解析与设定
X server 的配置 文件都是预设放置在 /etc/X11 目录下,而相关的显示模块或上面提到的总总模块,则主要放置在/usr/lib64/xorg/modules . 比较重要的是字型文件与芯片 ...
- python中子进程不支持input()函数输入
错误的源代码: import socketimport threadingimport multiprocessing# 创建socketserve_socket = socket.socket(so ...
- EXCEL宏做数据拆分
用处:将大容量的EXCEL工作簿分解成若干个小的工作簿 Sub aa() For i = 1 To 8 Set nb = Workbooks.Add nb.SaveAs Filename:=ThisW ...
- Python 实战一
列表ID的显示 起初ID显示的是数据库中的id,因为数据库中的id是自增长的,所以删除一条后,这里显示就叉开了,这里使用索引的方式来显示. 这个功能实现的逻辑: 第一:定义一个表格的架构,用id=‘i ...
- 转:Generating PDFs from Web Pages on the Fly with jsPDF
The Portable Document Format has been one the major innovations in the fields of desktop publishing ...
- HSL颜色处理
H--色调 S--饱和度 L--亮度 HSB(HSL) 色调饱和度亮度模式 以另外一种不同的理念进行色彩的调配 H色调 0~360 圆环形式 以角度表示 S 饱和度 0~1 之间的小数 L 亮度 0~ ...