不是id 随便什么参数
时间: 2023-09-27 12:10:39 浏览: 35
如果你想用自己定义的参数来代替ID,实现点击图片时获取对应的参数值,你可以在Vue模板中使用Vue自定义指令v-bind来绑定图片元素的参数值,然后在点击事件处理函数中获取该参数值。
下面是一个示例代码:
```html
<div id="photo-wall">
<div v-for="(photo, index) in photos" :key="index">
<img :src="photo.src" v-bind:data-param="photo.param" @click="showPhoto($event)" />
</div>
</div>
```
在上面的代码中,我们使用v-for指令遍历照片数组,并为每个照片绑定一个data-param属性,该属性的值为照片的参数值。然后我们使用@click事件处理函数来捕获用户点击事件,并将事件对象$event作为参数传递给showPhoto方法。在showPhoto方法中,我们可以通过事件对象的target属性来获取用户点击的图片元素,然后使用getAttribute方法来获取该元素的data-param属性值,即为照片的参数值。例如:
```javascript
new Vue({
el: '#photo-wall',
data: {
photos: [
{ src: 'photo1.jpg', param: 'param1' },
{ src: 'photo2.jpg', param: 'param2' },
{ src: 'photo3.jpg', param: 'param3' }
]
},
methods: {
showPhoto: function(event) {
var photoElement = event.target;
var paramValue = photoElement.getAttribute('data-param');
// TODO: 显示对应照片的详细信息或者执行其他操作
}
}
})
```
在上面的代码中,我们定义了一个名为showPhoto的方法,并接收一个事件对象event作为参数。然后我们通过事件对象的target属性来获取用户点击的图片元素,然后使用getAttribute方法来获取该元素的data-param属性值,即为照片的参数值。接下来你可以在showPhoto方法中执行任何你想要的操作,比如显示该照片的详细信息或者进行其他处理。