html+vue给每个图片赋值,method中想拿到其中一张图片的值 怎么做
时间: 2024-01-22 08:04:19 浏览: 66
你可以在Vue中使用v-bind指令将每个图片的值绑定到一个属性上,然后在methods中使用this访问这个属性来获取图片的值。具体实现可以参考下面的代码示例:
```html
<template>
<div>
<img v-for="(item, index) in images" :src="item.url" :alt="item.name" :key="index" @click="getImageValue(item)">
</div>
</template>
<script>
export default {
data() {
return {
images: [
{name: 'image1', url: 'path/to/image1'},
{name: 'image2', url: 'path/to/image2'},
{name: 'image3', url: 'path/to/image3'}
]
};
},
methods: {
getImageValue(item) {
console.log(item.name); // 获取当前点击的图片的name值
}
}
};
</script>
```
在上面的代码中,我们使用了v-for指令遍历images数组中的每个图片,并使用v-bind指令将每个图片的name和url属性绑定到对应的属性上。在click事件中调用getImageValue方法,并将当前点击的图片对象作为参数传入。在getImageValue方法中,我们可以通过访问传入的item对象来获取当前点击的图片的name值。
阅读全文