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

           

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