• Vue 分支循环


    v-for

    通过v-for进行循环,不光可以拿到元素本身,也可以拿到索引值。

    如果数据是对象类型,则可以使用(value,key,index)进行取值。

    需要注意的是,当不指定key/value而只指定一个迭代变量,那么该迭代变量取值会取value

    image-20200924151515251

    <body>
    
        <div id="app">
            <ul>
                <li v-for="(ele,index) in array">{{ele}}-{{index}}</li>
            </ul>
        </div>
    
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {
                array: ["第一个元素", "第二个元素", "第三个元素"],
            }
        })
    </script>
    </body>
    

    v-if

    if后的条件为true时则渲染出该标签以及该标签内的子标签。为false时则不渲染。

    类似于v-show,但是可以与v-else进行联用。

    image-20200925133935981

    <body>
    
        <div id="app">
            <p v-if="conditionOne">渲染我</p>
            <p v-if="conditionTwo">不渲染我</p>
        </div>
    
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {
                conditionOne: true,
                conditionTwo: false,
            },
        })
    </script>
    </body>
    

    v-else

    该指令应当和v-if连用,效果与v-if相反。

    这两组指令一个代表如果渲染,一个代表否则渲染。

    image-20200925134115177

    <body>
    
        <div id="app">
            <p v-if="conditionOne">条件为真渲染我</p>
            <p v-else>否则渲染我</p>
        </div>
        
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {
                conditionOne:false,
            },
        })
    </script>
    </body>
    
    

    v-else-if

    额外的判断条件,当有v-if/v-else/v-else-if在时,只会执行其中的一条。

    <body>
    
        <div id="app">
            <p v-if="grades > 90">成绩优秀</p>
            <p v-else-if="grades > 60">成绩及格</p>
            <p v-else-if="grades > 40">成绩一般</p>
            <p v-else>成绩较差</p>
        </div>
        
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {
                grades:80,
            },
        })
    </script>
    </body>
    

    逻辑判断

    v-if/v-else/v-else-if中,可以使用逻辑判断与或非。

    符号描述
    && 与(优先级3),一真一假取一假
    || 或(优先级2),一真一假取一真
    ! 非(优先级1),两个为真才取真

    image-20200925134743395

    <body>
        <div id="app">
            <p v-if="conditionOne && conditionTwo">两个为真,渲染</p>
        </div>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {
                conditionOne:true,
                conditionTwo:true,
            },
        })
    </script>
    </body>
    
    

    key属性

    由于虚拟DOM的渲染复用,所以我们的真实DOM并不会做我们想要的刷新。

    如下所示,我们定义了两个input框,但是会出现窜值的情况(即不同的输入框切换会保留一样的值):

    Vue的虚拟DOM数据保留

    <body>
    
        <div id="app">
            <input v-if="type == 'phone'" type="text" placeholder="手机注册" >
            <input v-if="type == 'email'" type="text" placeholder="邮箱注册" >
            <br>
            <label for="phoneReigster">手机
                <input id="phoneReigster" type="radio" v-model="type" value="phone">
            </label>
            <label for="emailReigster">邮箱
                <input id="emailReigster" type="radio" v-model="type" value="email">
            </label>
        </div>
        
        <script src='./vue.js'></script>
        <script>
            "use strict";
            const app = new Vue({
                el: "#app",
                data: {
                    type: "phone",
                },
            });
        </script>
    </body>
    

    这样的情况对用户体验来说并不友好,所以我们可以指定不同的key进行唯一绑定,这样就不会窜值了。

    <input v-if="type == 'phone'" type="text" placeholder="手机注册" key="phoneRigster">
    <input v-if="type == 'email'" type="text" placeholder="邮箱注册" key="emailRigster">
    

    Vue的虚拟DOM中使用key属性

    Vue与真实DOM之间存在一层虚拟DOM,虚拟DOM进行渲染时会尽量复用已存在的组件,而不是创建新的组件。

    上述示例中看起来写了两个input,其实是被复用了,所以导致窜值问题的出现,使用属性key可解决这个问题

    :key唯一标识

    在使用v-for进行循环的时候,你应该指定:key唯一标识,并且与渲染值要有一一对应关系,这样可以提升你后期操纵的效率。

    虚拟DOM的数组插入会依赖于diff算法,如下图所示:

    image-20201114152819419

    如果没有指定:key唯一标识,diff算法会这样执行:

    虚拟DOM在渲染到真实DOM时,会将第三个位置改成E,会将第四个位置改成C,会将第五个位置改成D

    显然这样效率是很低下的

    如果指定了:key唯一标识,且该唯一标识与渲染值有一一对应的关系,那么diff算法就会直接进行插入。

    image-20201114153620403

    如下代码所示,你应该在循环时指定:key唯一标识,并且要与渲染值一一对应。

    <body>
    
        <div id="app">
            <ul>
                <!-- 一定要一一对应,所以这里是与value做绑定,而不是index,index是可以变化的 -->
                <li v-for="(value,index) in array" :key="value">{{index+1}}-{{value}}</li>
            </ul>
            <button @click.once=func()>插入</button>
        </div>
        
        <script src='./vue.js'></script>
        <script>
            "use strict";
            const app = new Vue({
                el: "#app",
                data: {
                    array:[
                        "A","B","C","D",
                    ]
                },
                methods:{
                    func(){
                        this.array.splice(2,0,"E");
                    },
                },
            });
        </script>
    </body>
  • 相关阅读:
    直接用ISO文件在linux上安装新系统
    vsftpd config备忘
    失恋那回事~~~
    Java之深入JVM(0) 序
    No.6 ThreadLocal类及应用技巧
    Java之多线程(1) Race Condition引起的性能问题
    NO.10 Callable与Future的应用
    NO.5 线程范围内共享变量的概念与作用(二)
    NO.5 线程范围内共享变量的概念与作用(一)
    NO.7多个线程之间共享数据的方式探讨
  • 原文地址:https://www.cnblogs.com/plyc/p/14813308.html
Copyright © 2020-2023  润新知