中国做的比较好的电商网站有哪些,免费建网站系统,海外仓网站建设,打电话叫人做网站介绍之前一段时间由于工作很忙#xff0c;没有时间继续学习Vue#xff0c;今天算是继续对之前的学习进行补充了#xff0c;今天要学习的便是Vue的条件渲染和列表渲染#xff0c;我们将讨论if、if-else、if-else-if#xff0c;show等。在列表渲染中#xff0c;我们将讨论如…介绍之前一段时间由于工作很忙没有时间继续学习Vue今天算是继续对之前的学习进行补充了今天要学习的便是Vue的条件渲染和列表渲染我们将讨论if、if-else、if-else-ifshow等。在列表渲染中我们将讨论如何使用for循环。条件渲染对于条件渲染其概念就是满足条件的渲染界面输出在Vue中借助ifif-elseif-else-ifshow等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节浏览器效果在上面的例子中我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量并将其初始化为值true。它显示在按钮附近。在单击按钮时我们调用方法showdata它切换变量show的值。这意味着在单击按钮时变量show的值将从true变为falsefalse变为true。我们已将if分配给h1标记如以下代码段所示。Click Me这是H1标签现在它将做的是它将检查变量show的值如果它是真的将显示h1标签。单击按钮并在浏览器中查看因为show变量的值更改为falseh1标记不会显示在浏览器中。仅在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则displaynone。如果条件为真它会显示元素返回。因此元素始终存在于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的小伙伴有一些帮助共同进步
