这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，上期我们说了Vue常用指令中的两个指令，今天我们又来详细说说，不要小看简单，蛮重要的

Vue常用指令

v-for

顾名思义，肯定与for循环有关，该指令根据数据列表生成列表结构，我们在拿到数据后，一般拿到的是对象数组是不是，嵌套嵌套再嵌套。所以v-for经常与数组结合。
语法格式：（item,index）in arr，其中index代表索引
例如现在有个结构：

<div class="app">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}{{item}}</li>
        </ul>
    </div>

给点数据

 const vm = new Vue({
            el: ".app",
            data: {
                arr: ["大象", "老虎", "熊猫", "狮子"]
            },
        })

虽然只有一个li标签，但是实际上页面中已经渲染了4个li标签了，我们可以发现，li标签数量是根据arr中的元素个数决定的。回顾以往我们在原生js中，结构是不是写的比较多。v-for还是比较简单，好理解，还好用。

v-if与v-show

条件渲染，可以控制显示与隐藏，指令后面的内容最终解析为布尔值。

• true:显示
• flase:隐藏 以下我们可以假设这样一个效果，点击按钮切换图片的显示，可想而知，点击按钮，切换布尔值就可以了。

  <div v-if="flag">
            <img v-bind:src="imgsrc" alt=" ">
        </div>
        <button @click="flag=!flag">点击切换显示图片{{flag}}</button>

 data: {
            imgsrc: "./images/1642131151272.jpg",
            flag: true,
        },

点击按钮改变flag的值，也就是改变布尔值，进而v-if指令后面的值也改变。注意的是，如下图，v-if是直接操作dom的，false的话，直接移出dom，进而元素可能无法被获取。
改变flag的值前：

改变后。我们可以清晰的在控制台中看到，dom被移除

v-show也是如此，改变布尔值，进而改变显示的元素，但是与v-if不同的是，v-show不展示的元素不会被移出，隐藏的元素依旧可以被获取到，v-show只是改变了样式display的属性值。
所以我们可以总结到，在谈及优化时，最忌讳dom的操作，所以当我们切换频率较多时，我们就可以用v-show。

v-once

只能执行一次性插值，当数据改变时，插值处的内容不会更新。我们来实践一下。

点击可以改变数值，但是加入v-once后，数据改变了，插值处的内容没有更新。

   <span>{{num}}</span><button @click="changenum">点击改变数值</button>

 data: {
            num: 0,
        },
        methods: {
            changenum() {
                this.num++
            },
        }