05：基础功能演练：条件渲染与列表渲染

最新推荐文章于 2022-08-02 20:57:06 发布

VIP文章罗忠浩

最新推荐文章于 2022-08-02 20:57:06 发布

阅读量407

点赞数 1

分类专栏： Vue教程前端开发

本文链接：https://blog.csdn.net/insistlzh/article/details/87445655

版权

本章主要内容：

一、原生与VUE渲染的区别

二、VUE的条件渲染

三、VUE的列表渲染

四、（条件渲染+列表渲染）结合使用

条件渲染，顾名思义，将满足一定条件的内容进行渲染。

我们在原生js中如何来实现对DOM进行控制，只把想要的内容呈献给用户？

display、visibility

我们通过对display：none进行设置，来决定dom元素是否会呈现在页面上，这样做实际上DOM任然是存在的，不过是将它隐藏了，它隐藏后并不会占据原有的页面位置，之后页面会进行重新布局，所以感觉它不存在。

visibility，元素的可见性进行设置，但是这样设置之后你会发现页面上确实看不见它了，但是它所在的位置还是空着的。整体布局还是和原来一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE教程</title>
    <style>
        .div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 20px;
        }
        .div_none{
            display: none;
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 20px;
        }
        .div_visibility{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 20px;
            visibility: hidden;
        }

    </style>
</head>
<body>
<div class="div">
1
</div>
<div class="div_none">
2
</div>
<div class="div">
3
</div>
<div  class="div_visibility">
4
</div>
<div class="div">
5
</div>

</body>
</html>

这样做有什么不好的地方呢？

首先无论使用上述哪种，都存在一个问题，DOM已经渲染了，资源已经占用了，再有，控制的时候都需要你通过元素属性进行控制，这样是极为不方便的。

️而在VUE中是如何来处理这块内容呢？

条件渲染

VUE条件渲染涉及关键词v-if、v-slse、v-else-if、v-show

v-if

v-if是VUE定义的指令，书写在HTML中，控制元素的渲染与否，如：


<div v-if="true">
  <p>内容</p>
</div>

在v-if=之后，可以直接跟随true或者false，当为真的时候VUE将渲染这个DIV，当然也可以跟随一个表达式，如

<div v-if="1>3">
  <p>内容</p>
</div>

VUE将根据表达式的真假决定是否对DIV进行渲染，也可以使用变量作为判断，如：

<div v-if="divShow" id="app">
  <p>内容</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            divShow: 1
        }
    })
</script>

最终，满足条件的VUE都渲染出来，而不满足的你则不会看见。

v-else

v-else并不能单独出现，必须跟着v-if或者v-else-if成对出现，它会将结合v-else-if或者v-if，如果满足前面两点，则v-else的内容不会渲染，如不满足，则将v-else所在的DOM进行渲染。

<div v-if="sex=='女'">
 性别为：女
</div>
<div v-else>
 性别为：男
</div>

如果变量sex的值为女，则渲染【性别为：女】所在DIV，如不为女，则渲染【性别为：男
】所在DIV，除了sex=‘女’这一种结果，其他任何结果都会渲染【性别为：男
】所在D

最低0.47元/天解锁文章

罗忠浩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05：基础功能演练：条件渲染与列表渲染

本章主要内容：一、原生与VUE渲染的区别二、VUE的条件渲染三、VUE的列表渲染四、（条件渲染+列表渲染）结合使用条件渲染，顾名思义，将满足一定条件的内容进行渲染。我们在原生js中如何来实现对DOM进行控制，只把想要的内容呈献给用户？display、visibility我们通过对display：none进行设置，来决定dom元素是否会呈现在页面上，这样做实际上DOM任然是存在的，不...
复制链接

扫一扫