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,"E");
                },});
    </script>
</body>

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...