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

<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>