Vue3 V-for例子

最新推荐文章于 2024-07-27 19:03:29 发布

理想三旬ゞ

最新推荐文章于 2024-07-27 19:03:29 发布

阅读量556

点赞数 12

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_73971691/article/details/136916875

版权

使用reactive响应式定义数组变量(自动更新视图)，通过v-for标签渲染

<script setup>
import { reactive } from 'vue';

const Fruits = reactive([
    {
        "num": '1',
        "name": '苹果',
        "info": '苹果汁水丰富，可以生津止渴。'
    },
    {
        "num": '2',
        "name": '柠檬',
        "info": '柠檬具有生津止渴、化痰止咳的功效。'
    }
]);
</script>

<template>
    <div style="text-align: left; transform: translateY(-250px);"> <!-- 添加向上移动的样式 -->
        <div style="margin-bottom: 20px;">水果列表</div>

        <div style="width: 1000px;" v-for="fruit in Fruits" :key="fruit.num"> ▪ 水果编号: {{ fruit.num }} -- 水果名称: {{
            fruit.name }} --详细信息: {{ fruit.info }}</div>
    </div>
</template>

<style scoped>
</style>

表格布局

<script setup>
import { reactive } from 'vue';

const Fruits = reactive([
  {
    "num": '1',
    "name": '苹果',
    "info": '苹果汁水丰富，可以生津止渴。'
  },
  {
    "num": '2',
    "name": '柠檬',
    "info": '柠檬具有生津止渴、化痰止咳的功效。'
  }
]);
</script>

<template>
    <div style="text-align: center;">
      <div style="margin-bottom: 20px;">水果列表</div>
      
      <table border="1 solid" cellspacing="0">
        <tr>
          <th>水果编号:</th>
          <th>水果名称:</th>
          <th>详细信息:</th>
        </tr>
        <tr v-for="fruit in Fruits" :key="fruit.num">
          <td>{{ fruit.num }}</td>
          <td>{{ fruit.name }}</td>
          <td>{{ fruit.info }}</td>
        </tr>
      </table>
    </div>
  </template>
  

  
  <style scoped>
  table {
    margin: auto;
  }
  </style>