多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 事件与自定义属性 组件的标准属性可以通过v-bind指令绑定,并在事件处理程序中读取。如果希望给click等事件传递自定义数据,可以使用data-前缀,例如data-name表示name属性 ``` <text v-for="(item, index) in students" @click="menuClick" :id="index" :data-name="item.name" :data-age="item.age" :key="index"> {{index}} - {{item.name}} - {{item.age}} </text> ``` 然后在事件处理程序中通过e.target.dataset读取自定义属性集合,如e.target.dataset.name ``` methods: { menuClick: function (e) { console.log(e.target.id); console.log(e.target.dataset.name); console.log(e.target.dataset.age); } }, ``` 属性id为标准属性,而name和age属于自定义属性。 > 非标准属性直接绑定到组件上会被忽略掉。 ``` <template> <view style="flex-direction: column; flex: 1;"> <text v-for="(item, index) in students" @click="menuClick" :id="index" :data-name="item.name" :data-age="item.age" :key="index"> {{index}} - {{item.name}} - {{item.age}} </text> </view> </template> <script> export default { data() { return { students: [{ name: "张三", age: 18 }, { name: "李四", age: 20 } ], } }, methods: { menuClick: function(e) { // console.log(e); console.log(e.target.id); console.log(e.target.dataset.name); console.log(e.target.dataset.age); } }, } </script> <style> </style> ``` ![](https://box.kancloud.cn/b303ea22c38235f4577e458d970879c4_914x779.png)