条件渲染和循环渲染

条件渲染

 v-if和v-show的功能是一样的 都是当变量值为true时显示 为false时隐藏 但是v-if隐藏是通过移除节点在节点树中的位置，而v-show是通过给标签添加display：none属性实现隐藏效果 就是说v-if是将标签从节点树中直接删除 而v-show是通过给标签添加属性实现的

                  两种方法的优缺点：

        v-if具有较高的 切换消耗,常常用在用户不常切换的模块（频繁操作节点树消耗会很大 为了不浪费内存 所以一般用于不需要频繁切换的模块）

        v-show具有较高的性能消耗,常常用在频繁切换的模块中（虽然解决了消耗问题 但是因为虽然隐藏 但内容都在 所以会给内存造成一定的压力 一般用于需要频繁切换的模块中）

    <div class="box">
      <button @click="fn">点击隐藏</button>
      <p v-if="vif">出现了</p>
      <button @click="fm">点击隐藏</button>
      <p v-show="vshow">出现了</p>
    </div>
    <script>
      new Vue({
        el: ".box",
        data: {
          vif: true,
          vshow: true,
        },
        methods: {
          fn() {
            this.vif = !this.vif;
          },
          fm() {
            this.vshow = !this.vshow;
          },
        },
      });

循环渲染

 v-for会将当前标签内部所有样式元素做循环 el是数组中的元素 arr是循环的数组

    <div class="box">

      <p v-for="el in arr">今天{{el}}</p>

      <!-- 两层for循环嵌套  和js的双重for循环差不多-->

      <div v-for="el in arr2">

        <h1>{{el.name}}</h1>

        <p v-for="el2 in el.son">{{el2}}</p>

      </div>

      <div v-for="el in arr3">

        <h1>{{el.name}}</h1>

      </div>

    </div>

    <script>

      new Vue({

        el: ".box",

        data: {

          arr: [

            "星期一",

            "星期二",

            "星期三",

            "星期四",

            "星期五",

            "星期六",

            "星期日",

          ],

          arr2: [

            { name: "zhangsan", son: [1, 2, 3, 4, 5] },

            { name: "lisi", son: [5, 2, 3] },

            { name: "wangwu", son: [1, 2, 4] },

          ],

          arr3: [

            { name: "zhangsan", son: [1, 2, 3, 4, 5], sum: 5 },

            { name: "lisi", son: [5, 2, 3], sum: 7 },

            { name: "wangwu", son: [1, 2, 4], sum: 2 },

          ],

        },

      });

 

for和if放在了同一个标签中  没有先后顺序的要求,但是先执行for

        这样就会有问题：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

    解决方法： 把for弄到最外层，但是这样就会多一层无用的标签，此时可以使用template（元素生成后 该元素会被删除）就不会有多余的标签

 <p v-for="el2 in el.son" v-if="el.sum>5">{{el2}}</p>