vue-5 條件渲染/ 列表渲染

<template>
  <div>
    <table border="1px"
           align="center"
           width="45%">
      <th colspan="4">遍歷JSON數(shù)組</th>
      <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
      </tr>
      <tr v-for="(student,index) in students"
          :key="index">
        <td>{{ index }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.sex }}</td>
      </tr>
      <tr>
        <td>姓名：<input type="text"
                 v-model="name" /></td>
        <td>年齡：<input type="number"
                 v-model="age" /></td>
        <td>性別：<input type="text"
                 v-model="sex" /></td>
        <td><input type="button"
                 value="添加"
                 @click="add" /></td>
      </tr>
    </table>

    <h1>遍歷對象</h1>
    <ol v-for="(a,b,index) in car"
        :key="index">
      <li>{{index}}---{{b}}---{{a}}</li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "ListData",
  data() {
    return {
      students: [
        { name: "張三", age: 18, sex: "男" },
        { name: "李四", age: 17, sex: "女" },
        { name: "王五", age: 20, sex: "男" }
      ],
      car: {
        name: "奔馳",
        color: "迷彩",
        model: "300AL"
      },
      name: "",
      age: null,
      sex: ""
    };
  },
  methods: {
    add() {
      if (this.name != "") {
        let student = { name: this.name, age: this.age, sex: this.sex };
        this.students.push(student);
        this.name = null;
        this.age = null;
        this.sex = null;
      }else {
        alert("姓名不能為空")
      }
    }
  }
};
</script>