下拉菜单

<template>
    <div>
        <select v-model="xz">
            <option value="">请选择</option>
            <option v-for="flurt in list" :key="flurt" :value="flurt">
                {{ flurt }}
            </option>
        </select>
        <p>你选择了{{ xz }}</p>
    </div>
</template>
<script setup>
    import {ref} from 'vue'
    const list = ref([
        '苹果',
        '橘子',
        '橙子',
        '香蕉'
    ])
    const xz = ref('')
</script>
<style>
*{
    text-align: center;
}
</style>

列表渲染

<template>
    <div>
        <h2>水果列表</h2>
        <div v-for="(item,index) in shuiguo" :key="index">
            id:{{ item.id }} 名称{{ item.name }} 描述{{ item.doc }}
        </div>
    </div>
</template>
<script setup>
    import {ref} from 'vue'
    const shuiguo = ref([
        {
            id:1,
            name:'苹果',
            doc:'可以吃'
        },
        {
            id:2,
            name:'香蕉',
            doc:'^_^'
        },
        {
            id:3,
            name:'苹果',
            doc:'也许可以吃'
        }
    ])
</script>

表格渲染

<template>
    <div class="student-table">
      <h3>学生信息表</h3>
  
      <!-- 表格 -->
      <table border="1" cellpadding="10" cellspacing="0" align="center">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
          </tr>
        </thead>
        <tbody>
          <!-- v-for 循环渲染 -->
          <tr v-for="item in studentList" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.major }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  // Vue3 组合式API
  import { ref } from 'vue'
  
  // 表格数据
  const studentList = ref([
    { id: 1, name: '张三', gender: '男', age: 20, major: '计算机科学与技术' },
    { id: 2, name: '李四', gender: '女', age: 19, major: '软件工程' },
    { id: 3, name: '王五', gender: '男', age: 21, major: '人工智能' },
    { id: 4, name: '赵六', gender: '女', age: 20, major: '数据科学与大数据技术' }
  ])
  </script>
  
  <style scoped>
  .student-table {
    text-align: center;
    margin: 20px;
  }
  table {
    width: 600px;
    border-collapse: collapse;
  }
  th {
    background-color: #f5f5f5;
  }
  </style>