vue的v-if&v-else&v-else-if&虚拟DOM

3月

本文最后更新于2020年03月17日，已经过了1710天没有更新，若内容或图片失效，请留言反馈

v-if&v-else&v-else-if

这三个指令域javascript的if,else.else if类似
vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素组件

v-if可以单独使用，v-else必须接在v-if或v-else-if之后，v-else-if必须接在v-if之后。

基本案列演示

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        
        const app= new Vue({
            el:"#app",
            data:{ 
                score:50
            }
        })
    </script>
</body>
</html>

当v-if中的表达式为false时，对应的元素及其子元素不会被渲染，也就是根本不会有对应的标签出现在DOM中

登录切换小案列

通过点击按钮实现用户名和邮箱输入的切换

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" value="" placeholder="username" />
        </span>
        <span v-else>
            <label for="email">邮箱</label>
            <input type="text" name="email" id="email" value="" placeholder="email"/>
        </span>
        <button type="button" @click="isUser = !isUser">切换</button>
    </div>
                
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">    
        const app = new Vue({
            el:"#app",
            data:{ 
                isUser:true,
            }
        })
    </script>
</body>
</html>

小案列中的小问题

我们在有输入内容的情况下点击切换按钮,会发现输入框中任然有之前输入的内容，但按道理来说我们已经切换到另一个input元素中了，在另一个input中我们并没有输入内容。

解答

原因

vue在经行DOM渲染时，出于性能考虑，会尽可能的服用已经存在的元素，而不是创建新的元素。

如何复用

vue在渲染元素时会先将元素抽象成一个虚拟DOM放到内存中，虚拟DOM可以看作真实DOM的映射，在进行玩这个步骤后vue才会将元素渲染到DOM中。

案列讲解

在点击切换时，vue通过比较用户名D和邮箱的虚拟OM发现它们的的lable元素和input元素是相同的

text 代码:

        <span v-if="isUser">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" value="" placeholder="username" />
        </span>
        <span v-else>
            <label for="email">邮箱</label>
            <input type="text" name="email" id="email" value="" placeholder="email"/>
        </span>

这是vue出于性能考虑并不会将邮箱直接渲染到DOM上，而是复用用户名中与邮箱相同的元素也就是lable和input，于此同时比较两者是否有不同的属性并将其修改（id、name、placeholder等），但我们输入的内容也就是input的value并不会修改。

解决方式

当你不希望某几个元素之间可以复用时，可以为他们添加一个唯一的key值

text 代码:

        <span v-if="isUser">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" value="" placeholder="username" key="username"/>
        </span>
        <span v-else>
            <label for="email">邮箱</label>
            <input type="text" name="email" id="email" value="" placeholder="email" key="email"/>
        </span>

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢