温故

上一节：零基础入门Vue之皇帝的新衣——样式绑定

在前面的内容能了解到，Vue不仅仅能进行数据渲染还可以对样式进行绑定

并且他能随意的切换样式，但Vue的初衷就是尽量少让使用者操作dom节点

加入你要让指定dom显示或者不显示，该怎么办呢？以目前的东西来说，不拿到dom节点还是做不到的

因此，Vue提供了另外的办法去解决它：条件渲染

v-if
v-show

条件渲染之v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

从官网上看，这个v-if指令理解起来也不难，就是说，想要显示就

<div v-if="true"></div>

不想显示就

<div v-if="false"></div>

v-if的基本用法

可以根据前面提到的原理，用一个变量去控制，毕竟双引号里面可以写js表达式

基于这个原理，实现一个点击按钮显示文字，再点击文字消失，再点击显示以此类推的效果

v-else与v-else-if

众所周知，在变成语言里面分支是依赖于if-else或者是if-else-if来控制的（switch、三目暂且不论）

Vue也提供了这一种方式，允许根据一定条件下来控制多个dom节点的显示或不显示

PS：如果要使用这种办法，dom节点必须连在一起不能拓展且当条件为false的时候这个dom会被删除，但为true的时候会添加进去

请看如下例子：利用Vue的条件渲染，实现判断密码是否输入错误、输入为空、输入正确，并且给出提示

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="password" v-model="pwd" placeholder="enter you pwd."><br/>
        
        <span v-if="pwd==''">密码不能为空</span>
        <span v-else-if="pwd!=='123456'">密码错误</span>
        <span v-else >密码正确</span>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#root",
        data:{
            pwd:""
        },
    })
</script>
</html>

条件渲染之v-show

v-show与v-if不同，v-show是直接让节点不显示，但并不是删除

并且v-show没有其他的else，他就只有一个true显示false不显示

看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <span v-show="show">Hello world</span><br/>
        <button @click="show=!show">点我显示文字</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
    })
</script>
</html>

我比较懒，直接搬了v-if的基本使用的代码，v-show的用法只有这一点，其他的也无非是在””里面写变量去控制显示不显示

打开浏览器的开发者调试工具可以看到当show为false时这个节点存在但他被隐藏了，但v-if是直接删除

ps：v-show比较适用于变动比较频繁的场合，变动不需要渲染很多东西

The End

下一篇：零基础入门Vue之影分身之术——列表渲染&渲染原理浅析

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。