vue数组中每个对象有照片,照片的代码格式改怎么写
时间: 2024-06-09 14:12:03 浏览: 61
如果你要在Vue数组中的每个对象中添加照片,可以在每个对象中定义一个照片属性,属性的值可以是一个字符串,该字符串是图片的URL地址。例如:
```javascript
[
{
name: 'John',
age: 25,
photo: 'https://example.com/image1.jpg'
},
{
name: 'Jane',
age: 30,
photo: 'https://example.com/image2.jpg'
},
{
name: 'Bob',
age: 35,
photo: 'https://example.com/image3.jpg'
}
]
```
如果你想在Vue模板中显示这些照片,可以使用`<img>`标签,并将该标签的`src`属性绑定到每个对象的`photo`属性。例如:
```html
<ul>
<li v-for="item in items">
<h2>{{ item.name }}</h2>
<p>{{ item.age }}</p>
<img :src="item.photo" alt="Photo of {{ item.name }}">
</li>
</ul>
```
在上面的示例中,`items`是包含对象的数组,使用`v-for`指令循环遍历每个对象,并使用`<img>`标签显示对象的照片。注意,使用Vue的绑定语法`:src`将`item.photo`绑定到`<img>`标签的`src`属性上,这样Vue会自动更新`<img>`标签的`src`属性。
阅读全文