关注我们

VueJS - 页面渲染

在本章中，无涯教程将学习条件渲染和列表渲染。在条件渲染中，将讨论有关使用if，if-else，if-else-if，show等的信息。在列表渲染中，将讨论如何使用for循环。

使用条件渲染时只希望在满足条件并且在if，if-else，if-else-if，show等帮助下完成条件检查时输出。

v-if 语句

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

运行上面代码输出

在上面的示例中，创建了一个按钮和两个带有消息的h1标签。

声明了一个名为show的变量并将其初始化为true值。单击按钮后，将调用方法 showdata ，该方法可切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，从false变为true。

如下面的代码片段所示，已将if分配给h1标签。

复制代码

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

现在它将要做的是，它将检查变量show的值，如果其值为true，则将显示h1标签。值更改为false，则 h1标签不会显。

以下是浏览器中的显示。

如果在浏览器中签入，这就是show为false时得到的结果。

当变量show设置为false时，将从DOM中删除h1标签。

这是当变量为true时看到的。当变量show设置为true时，会将h1标签添加回DOM。

v-else 语句

在以下示例中，无涯教程将V-else添加到了第二个h1标签。

复制代码

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 V-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

使用以下代码段添加V-else。

复制代码

<h1 v-if = "show">This is h1 tag</h1>
<h2 V-else>This is h2 tag</h2>

现在，如果show为true，将显示"This is h1 tag" ，如果为false，则将显示"This is h2 tag" 。

现在，当单击按钮时，show变量将变为false，并且第二条语句将显示，如以下屏幕截图所示。

v-show 语句

v-show的行为与v-if相同。它还根据分配的条件显示和隐藏元素。

v-if和v-show之间的区别在于，

v-if 如果条件为false，则v-if从DOM中删除HTML元素，如果条件为true，则将其重新添加。

v-show 如果条件为false则 display:none 隐藏元素，如果条件为true则显示元素，因此，v-show元素终存在于dom中。

复制代码

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

使用以下代码段将v-show分配给HTML元素。

复制代码

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

无涯教程使用了相同的变量show，并且基于它的true/false，图像显示在浏览器中。

让单击按钮并查看显示。

变量show为false，因此图像被隐藏。如果检查并看到该元素，则div和img元素仍然在DOM中。

v-for 语句

现在讨论使用v-for指令的列表呈现。

复制代码

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

在方法中，有一个名为 showinputvalue 的方法，在该方法中，使用以下代码将在文本框中输入的水果添加到数组中。

复制代码

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

无涯教程使用v-for来显示输入的结果，如以下代码所示。 V-for帮助迭代数组中存在的值。

复制代码

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

要使用for循环遍历数组，必须使用v-for =" a in items"，其中a保存数组中的值，并显示直到所有元素完成。

以下是浏览器中的输出。

在DOM中，看不到li元素的任何v-for指令。

链接：https://www.learnfk.comhttps://www.learnfk.com/vuejs/vuejs-rendering.html

来源：LearnFk无涯教程网

如果希望显示数组的索引，可以使用以下代码完成。

无涯教程网

复制代码

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

为了获得索引，无涯教程在方括号中添加了另一个变量，如以下代码所示。

复制代码

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

在(a，index)中， a 是值，而 index 是键。现在，浏览器显示将如以下所示。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Midjourney入门实践课 -〔Jovi〕

好记忆不如烂笔头。留下您的足迹吧 :)