一、问题:
在elementUI的开发过程中,有时候会经常遇到,在已定义好的change事件中,想要传递一些自定义的数据,应该怎么解决?
二、解决方案:
1、select标签的change事件
正常情况:默认返回的是目前选中的值。
特殊情况:要传递自定义参数index呢?就需要用到$event,来获取默认的值,然后再其后面来实现对自定义参数的传递。
注:【该$event是指当前触发的是什么事件(鼠标事件,键盘事件等)】
2、InputNumber计数器中的change事件
正常情况:默认返回的是newValue,oldValue
特殊情况:要传递自定义参数index呢?需要用到箭头函数来变通,实现自定义参数的传递。
三、具体案例:
案例1、select标签的change事件
【准备数据】
在data中定义select标签选项中的数据为options数组。数据格式如下:
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
【正常情况】
在模板中使用select标签来显示下拉选项,绑定change事件为selectedItem。代码如下:
v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
在methods方法中,定义selectedItem方法,来实现与标签change事件的响应。代码如下:
selectedItem(e){
console.log("你选择了:",e)
},
页面效果为:
当然,你也可以直接传递对象形式的。代码的具体变化如下:
【特殊情况】
传递自定义的参数。以上面数据为例,如果想同时传递一个自定义index值,该如何去做呢?
1.更改标签事件中的绑定事件的写法:
2.更改绑定事件中参数传递的数量:
输出结果为:
<>案例2、InputNumber计数器中的change事件
【正常情况】
页面效果:
【特殊情况】
页面效果:
相关阅读
发表评论