vue表格展示图片,传一个路径展示
时间: 2023-07-01 18:07:45 浏览: 93
要展示图片,我们可以使用`<img>`标签。在Vue中,可以将路径放在data中的一个变量中,然后通过插值表达式(`{{}}`)绑定到`<img>`标签的`src`属性上。
HTML代码:
```html
<table>
<tr>
<th>图片</th>
<th>名称</th>
</tr>
<tr v-for="item in items" :key="item.id">
<td><img :src="item.imgSrc"></td>
<td>{{ item.name }}</td>
</tr>
</table>
```
在Vue实例中,我们需要定义一个`items`数组,其中每个元素表示一个条目,包含名称和图片路径。
JavaScript代码:
```javascript
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '图片1', imgSrc: 'path/to/image1.jpg' },
{ id: 2, name: '图片2', imgSrc: 'path/to/image2.jpg' },
{ id: 3, name: '图片3', imgSrc: 'path/to/image3.jpg' },
{ id: 4, name: '图片4', imgSrc: 'path/to/image4.jpg' },
{ id: 5, name: '图片5', imgSrc: 'path/to/image5.jpg' }
]
}
})
```
在上述代码中,我们定义了一个包含5个条目的`items`数组,每个条目都有一个名称和图片路径。在HTML代码中,我们使用`v-for`指令循环遍历`items`数组,并使用插值表达式展示名称和图片。图片路径通过`:src`绑定到`img`标签上。
这样,就可以在Vue中展示带有图片的表格了。
阅读全文