Vue-----循环渲染

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

渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

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

2.解决方案把for弄到最外层(面试)

如果if和for套在一层,数据容器发生变化时,if会重新判断一遍嵌套的写法 数据容器变化时 if只判断新增的数据这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment

举例：

单层循环

 <div id='app'>

        <div v-for="el in arr" class="app" >

            <p>{{el}}</p>

        </div>

    </div>

    <script>

        new Vue({

            el:'#app',

            data: {

                arr:["hello","hello2","hello3","hello4"]

            },

            methods: {}

    })

    </script>

 

双层循环：

    <div id='app'>

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

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

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

        </div>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                arr: [{

                    title: "hello",

                    name: ["one", "tow", "three"]

                }, {

                    title: "hi",

                    name: ["seven"]

                }, {

                    title: "yes",

                    name: ["four", "five", "six", "eight"]

                }],

            },

        })

    </script>

如果插值表达式里面没有取到值，其盒子是不会渲染了的

 

选择商品

    <div id="app">

        <h1>请选择你最喜欢的5件商品(免费赠送给你)</h1>

        <div v-for="el in arr" :key="el.id">

            <input type="checkbox" name="goods" :value="el.id">

            <!--

                如果在新内容后面添加新的节点就不会出现我们选择的复选框就不会移动；

                当我们在原本内容的前面添加新内容时，就会出现一个bug就是我们选择节点

                一直都不会改变但只有title在向下移动

                修改方法：在复选框中给value绑定k值 :value="el.id" 由于每个元素的k值

                是独一无二的所以选择复选框以后就会随着title移动。

           

            -->

            <b>{{el.title}}</b>

        </div>

        <button @click="addmore">加载更多</button>

    </div>

    <script type="text/javascript">

        new Vue({

            el:"#app",

            data:{

                  id:5,

                arr:[{id:1,title:"包包1",price:123},

                {id:2,title:"鞋子1",price:123},

                {id:3,title:"衣服1",price:123},

                {id:4,title:"商品1",price:123}]

            },

            methods:{

                addmore(){

                    let obj={id:this.id++,title:"商品"+this.id,price:123}

                    // this.arr.push(obj)

                    this.arr.unshift(obj)

                }

            }

        })

        //for循环的k意义：

                    // 让数据跟真实的dom-----关联 使之不发生渲染混乱的关系

                    //提高绘制效率

       

    </script>