1

零基础入门Vue之To be or not to be——条件渲染 - StarVik

 7 months ago
source link: https://www.cnblogs.com/Star-Vik/p/18006987
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

温故#

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

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

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

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

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

条件渲染之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#


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK