介绍

之前一段时间由于工作很忙，没有时间继续学习Vue，今天算是继续对之前的学习进行补充了，今天要学习的便是Vue的条件渲染和列表渲染，我们将讨论if、if-else、if-else-if，show等。在列表渲染中，我们将讨论如何使用for循环。

条件渲染

对于条件渲染，其概念就是满足条件的渲染界面输出，在Vue中借助if，if-else，if-else-if，show等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节

浏览器效果

在上面的例子中，我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量，并将其初始化为值true。它显示在按钮附近。在单击按钮时，我们调用方法showdata，它切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，false变为true。我们已将if分配给h1标记，如以下代码段所示。

Click Me

`这是H1标签`

现在它将做的是，它将检查变量show的值，如果它是真的，将显示h1标签。单击按钮并在浏览器中查看，因为show变量的值更改为false，h1标记不会显示在浏览器中。仅在show变量为true时显示。

以下是浏览器中的显示。

我们看下浏览器中dom的变化情况

变为false时，h1已经不见了

下面是使用了if-else的示例

主要就是这段代码：

`这是H1标签`

`这是H2标签`

现在，如果show为true，将显示“这是H1标签”，如果为false，则显示“这是H2标签”。这是我们将在浏览器中获得的内容。

点击按钮后变化

接下来是v-show的示例

v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素，如果条件为真则将其添加回来。而v-show隐藏了元素，如果条件为false，则display：none。如果条件为真，它会显示元素返回。因此，元素始终存在于dom中。

列表渲染

v-for

现在让我们使用v-for指令进行列表渲染

名为items的变量声明为数组。在方法中，有一个名为showinputvalue的方法，它被分配给带有水果名称的输入框。在该方法中，使用以下代码将输入文本框内的水果添加到数组中

showinputvalue : function(event) { this.items.push(event.target.value);}

我们使用v-for来显示输入的水果，如下面的代码片段所示。V-for迭代数组中存在的值。

{{a}}

要使用for循环迭代数组，我们必须使用v-for = "a in items"，其中a保存数组中的值并显示直到所有项都完成。我们看下浏览器输出：

尝试输入一些水果名称：

Dom代码对比

如果我们希望显示数组的索引，则使用以下代码完成：

主要代码如下

{{index}}--{{a}}

浏览器效果如下

总结

以上就是对Vue中的条件渲染和列表渲染的介绍，非常的简单，但是越是简单的东西越是要打捞基础，就像是学习编程语言的语法一样，希望对和我一样初学Vue的小伙伴有一些帮助，共同进步！

vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染相关推荐

15分钟学会vue项目改造成SSR
15分钟学会vue项目改造成SSR Ps:网上看了好多服务器渲染的例子,基本都是从0开始的,用Nuxt或者vue官网推荐的ssr方案(vue-server-renderer),但是我们在开发过程中基本 ...
5分钟学会vue中的路由守卫
5分钟学会vue中的路由守卫在项目开发中每一次页面的跳转或者刷新,都需要判断用户是否已经登录.后端会进行判断的,前端最好也进行一次判断. vue-router提供了导航钩子:全局前置导航钩子 bef ...
vue 限制渲染条数_深入理解Vue 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组在使用 ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
baidumap vue 判断范围_懂一点前端—Vue快速入门
01. 什么是 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以数据驱动和组件化的思想构建的 ...
Juniper 210 密码清不掉_三分钟学会如何找回mysql密码
一.在测试工作中我们肯定会写一些sq查询语句方便我们验证数据是否正确,从而判断当前软件是否存在缺陷,但是查询的过程中肯定需要我们先连接数据库,如果数据库密码忘记我们就无法完成工作,这里就教会大家如何快 ...
chrome怎么隐藏浏览器_如何使用Google Chrome的隐藏阅读器模式
chrome怎么隐藏浏览器 Chrome 75 has a hidden "Reader" mode that strips web pages down to the bare ...
一分钟学会看k线图_一分钟学会看k线图可能吗？
在互联网金融浪潮的推动下,网上投资理财已经变得触手可及,甚至成为热门茶余饭后的谈论话题,不想落伍的朋友都纷纷加入了学习的队伍,但很多人平常工作生活忙碌,不太可能花费许多的时间和精力来学习,所以如果能一 ...
老滚5初始化python失败_五分钟学会怎么用python做一个简单的贪吃蛇
Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上开发.我们今天将利用它来制作一款大家基本都玩过的小游戏--贪吃蛇. 一.需要导入的包 import pygame ...

vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染

介绍

条件渲染

`这是H1标签`

`这是H1标签`

`这是H2标签`

列表渲染

总结

vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染相关推荐

最新文章

热门文章