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

<template>
  <div>
    <table border="1px"
           align="center"
           width="45%">
      <th colspan="4">遍历JSON数组</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>

 

<template>

  <div>

    <h1 style="background-color: yellowgreen; width: auto; ">--------v-if--------</h1>

    条件：type==

    <select v-model="type">

      <option value="A">A</option>

      <option value="B">B</option>

      <option value="C">C</option>

      <option value="D">D</option>

      <option value="F">G</option>

    </select><br />

    选中的值是：<span v-if="type === 'A'">

      A

    </span>

    <span v-else-if="type === 'B'">

      B

    </span>

    <span v-else-if="type === 'C'">

      C

    </span>

    <span v-else>

      其他值

    </span>

    <h1>--------v-if与v-show差异F12查看--------</h1>

    <div v-if="isIf">我是通过v-if来切换是否显示</div>

    <input type="button"

           value="v-if 显示/隐藏"

           @click="toggleIf" />

    <div v-show="isShow">我是通过v-show来切换是否显示</div>

    <input type="button"

           value="v-show 显示/隐藏"

           @click="toggleShow" />

  </div>

</template>

<script>

export default {

  name: 'ondition',

  data() {

    return {

      type: 'B',

      isShow: true,

      isIf: true,

    }

  },

  watch: {

    isShow(newValue, oldValue) {

      console.log(newValue)

      console.log(oldValue)

    },

  },

  methods: {

    toggleShow: function () {

      this.isShow = !this.isShow

    },

    toggleIf: function () {

      this.isIf = !this.isIf

    },

  },

}

</script>