【Vue常用指令之流程控制】

Vue常用指令之流程控制

v-if

示例：判断一个元素是否显示

<div id="abc">
<!--  a=true的时候显示p标签的内容-->
    <p v-if="a">显示</p>
  <p v-else>隐藏</p>
  <button type="button" @click="btn">按钮</button>
</div>
<script>
  const test = {
    data() {
      return {
        a: false
      }
    },methods: {
       btn(){
         if(this.a){
           this.a = false
         }else{
           this.a = true
         }
       }
    }
  }
  Vue.createApp(test).mount('#abc')
</script>

v-if指令必须将它添加到一个元素上。
也可以添加多个元素，将判断条件添加到父级标签：
示例：添加一个else块，此时可以把一个元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含元素。

<div id="abc">
<template v-if="a">
  <h1>隐藏的内容</h1>
  <p>第一段内容</p>
  <p>第二段内容</p>
  <p>第三段内容</p>
</template>
  <button type="button" @click="btn">按钮</button>
</div>
<script>
  const test = {
    data() {
      return {
        a: false
      }
    },methods: {
       btn(){
         if(this.a){
           this.a = false
         }else{
           this.a = true
         }
       }
    }
  }
  Vue.createApp(test).mount('#abc')
</script>

v-else-fi多分支：

<div id="abc">
  <p v-if="a == 'A'">A</p>
  <p v-else-if="a == 'B'">B</p>
  <p v-else>其他</p>
</div>
<script>
  const test = {
    data() {
      return {
        a: 'C'
      }
    }

  }
  Vue.createApp(test).mount('#abc')
</script>

v-show

v-show：另一个用于条件性展示元素的指令，与v-if不同的是，v-show的元素始终会被渲染并保留再DOM中，所以v-show只是简单地切换元素的display CSS属性。

<div id="abc">
  <p v-show="a">文字信息</p>
</div>
<script>
  const test = {
    data() {
      return {
        a: true
      }
    }

  }
  Vue.createApp(test).mount('#abc')
</script

v-for

可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式的特殊语法，其中items 是源数据数组，而item 则是被迭代的数组元素的别名。

当Vue 正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key 属性：

<div id="abc">
<!--  遍历数组-->
    <ul>
        <li v-for="(v, xiabiao) in computer">
            {{ xiabiao }} -- {{ v }}
        </li>
    </ul>
<!--    遍历对象-->
    <ol>
        <li v-for="(v, k) in username" key="k">
            {{ k }} -- {{ v }}
        </li>
    </ol>
</div>
<script>
  const test = {
    data() {
      return {
        computer: [
                "处理器",
                "内存",
                "硬盘"
        ],
          username: {
            name1: "张三",
              name2: "李四",
              name3: "王五"
          }
      }
    }

  }
  Vue.createApp(test).mount('#abc')
</script>

v-for：选择列表案例

<div id="abc">
<select @change="select($event)">
    <option value="None">请选择</option>
    <option v-for="i in username" :key="i.id" :value="i.name">
        {{ i.id }}: {{ i.name }}
    </option>
</select>
    <p>选择当前状态：{{ selectname }}</p>
</div>
<script>
  const test = {
    data() {
      return {
        username: [
            {id: 1, name: "开机"},
            {id: 2, name: "关机"},
            {id: 3, name: "状态异常"},
                ],
          selectname: '未作出选择'
      }
    },methods: {
        select(event){
            this.selectname = event.target.value
            if(this.selectname == "None"){
                this.selectname = "未作出选择"
            }
        }
      }

  }
  Vue.createApp(test).mount('#abc')
</script>