如何利用vue进行条件渲染

赵春朋发布于2019-08-20 19:05 / 3475人阅读

摘要：在中配合条件渲染一整组因为是一个指令，需要将它添加到一个元素上。因此，如果需要非常频繁地切换，则使用较好如果在运行时条件不太可能改变，则使用较好。

vue的条件渲染 v-if

v-if指令可以插入和删除所命令的模板

Yes

data:{
    ok:true
}

输出HTML

Yes

当我们更改 ok 为 false时
我们会发现页面的 Yes 消失，在控制台里面会发现 h1 标签也已经消失。

v-else-if 和 v-else

我们知道 js 里面有 if 判断语句是 if 和else if 和 else 配合使用，所以 vue 也为我们提供了一个 v-else-if 和 v-else 指令与 v-if 配合使用,但是 v-else-if 和 v-else 必须紧跟在 v-if 或者 v-else-if 元素之后。

比如我们做一个小例子来演示一下,假设ok>=90,我们显示优秀，ok>=60时，显示及格，OK<60时，显示不及格。

优秀
及格
不及格

data:{
    ok:100
}

当我们更改ok的值为 100 ，80 ， 40 时，我们会发现页面所显示的依次是优秀，及格，不及格。

在 < template > 中配合 v-if 条件渲染一整组

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 < template > 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 < template > 元素。

data:{
    ok:true
}

输出HTML

Title
Paragraph 1
Paragraph 2

我们在控制台会发现< template > 元素真的并没有渲染，而当我们更改 ok 为 false ，我们会发现页面所有内容全部消失。

v-show

v-show也是根据条件控制元素的显示，用法与 v-if 相同，但是 v-show 与 v-if 不同的是，v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持 < template > 语法，也不支持 v-else

v-if VS v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if 和 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用


    {{item.text}}

data:{
    todo:[
        {text:1,ok:true},
        {text:2,ok:true},
        {text:3,ok:true},
    ]
}

当 ok 为 true 时，输出为

1
2
3

当我更改 data 里面第二的 ok 的值为 false 时，会输出

1
3

这是先进行 v-for 的渲染，然后在进行 v-if 的渲染。

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，如果你允许用户在不同的登录方式之间切换:

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

注意，元素仍然会被高效地复用，因为它们没有添加 key 属性。

GPU云服务器云服务器 vue条件渲染条件渲染 js 按条件对数据进行筛选利用python进行数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85127.html

Vue2.5笔记：v-if 和 v-show指令

摘要：并在上面使用，最终渲染结果将不包括元素。另外一个根据条件展示元素的指令，用法与大致相同。注意，不支持元素，也不支持与看完了文章，你会发现我们可以利用和两个指令来控制我们元素的行为。熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来控制 DOM 元素的行为，例如最...

BigTomato 2019-08-23 12:15 评论0 收藏0
Vue2.5笔记：Vue中的模版

摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。模...

shevy 2019-08-23 12:11 评论0 收藏0
Vue 的条件渲染和列表渲染

摘要：条件渲染上一篇与绑定下一篇的事件处理方法在中配合渲染一整组在使用控制元素的时候，我们需要将它添加到这个元素上去。最终的渲染结果不会包含元素。渲染如下列表渲染使用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。条件渲染上一篇：Class 与 Style 绑定：https://segmentfault.com/a/11...下一篇：Vue的事件处理方法：https:/...

go4it 2019-08-20 19:06 评论0 收藏0
精读《Vue3.0 Function API》

摘要：拿到的都是而不是原始值，且这个值会动态变化。精读对于的与，笔者做一些对比。因此采取了作为优化方案只有当第二个依赖参数变化时才返回新引用。不需要使用等进行性能优化，所有性能优化都是自动的。前端精读帮你筛选靠谱的内容。 1. 引言 Vue 3.0 的发布引起了轩然大波，让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧！首先官方回答了几个最受关注的...

voyagelab 2019-08-23 18:24 评论0 收藏0
vue源码阅读之数据渲染过程

摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

AlphaGooo 2019-05-22 16:53 评论0 收藏0