请使用v-for完成水果列表暂无解析水果列表 水果编号:1 苹果 苹果汁水丰富,可以生津止渴。 水果编号:2 柠檬 柠檬具有生津止渴、化痰止咳的功效。
时间: 2024-09-19 21:04:12 浏览: 55
高清写实蔬菜水果模型食物道具苹果香蕉黄瓜南瓜素材:4K Photogrammetry Fruits v1.0
你可以使用Vue.js的`v-for`指令来遍历并显示水果列表。下面是一个简单的例子:
```html
<template>
<div class="fruit-list">
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
<span>水果编号: {{ fruit编号 }}</span>
<p>{{ fruit }}</p>
<!-- 如果有对应的功能描述,如苹果汁水丰富, 可以添加一段文本 -->
<!-- 这里假设有一个详细的描述变量description,实际应用中需要替换 -->
<p>{{ description[fruit] }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
fruits: ['苹果', '柠檬'],
description: {
'苹果': '苹果汁水丰富, 可以生津止渴',
'柠檬': '柠檬具有生津止渴、化痰止咳的功效'
}
};
}
};
</script>
```
在这个模板中,`v-for`会循环遍历`fruits`数组,并为每个元素创建一个新的列表项。`fruit编号`和`fruit`分别代表当前水果的信息,而描述则是从`description`对象中获取。
阅读全文