投稿
  1. Web176教程首页
  2. VueJs教程

VueJS-渲染

terry • • VueJs教程 • 阅读 314

在本章中，我们将学习条件渲染和列表渲染。在条件渲染中，我们将讨论如何使用if，if-else，if-else-if，show等。在列表渲染中，我们将讨论如何使用for循环。

有条件的渲染

让我们开始并首先研究一个示例，以说明条件渲染的细节。使用条件渲染时，我们只希望在满足条件并且在if，if-else，if-else-if，show等帮助下完成条件检查时输出。

v-if

例

<html>
   <head>
    <title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.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标签。单击按钮并在浏览器中查看，因为show变量的值更改为false，所以h1标记不会显示在浏览器中。仅在show变量为true时显示。

v-else

在以下示例中，我们将v-else添加到了第二个h1标签。

例

<html>
   <head>
    <title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.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”。这就是我们将在浏览器中获得的。

VueJS-渲染

上面的显示是当show变量为true时。由于我们添加了v-else，因此第二条语句不存在。现在，当我们单击按钮时，show变量将变为false，并且第二条语句将显示，如以下屏幕截图所示。

VueJS-渲染

v-show

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

例

<html>
   <head>
    <title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.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 class="j-lazy" src="/wp-content/uploads/2020/11/vue.jpg" data-original="/wp-content/uploads/2020/11/vue.jpg" alt="VueJs教程" style="display: inline;">
         </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元素。

V-Show: VueJs教程

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

VueJS-渲染

现在，由于变量show为true，因此图像如上面的屏幕快照所示。让我们单击按钮并查看显示。

VueJS-渲染

变量show为false，因此图像被隐藏。如果我们检查并看到该元素，则div和图像仍然是DOM的一部分，并且具有style属性显示：如上图所示，没有。

列表渲染

v-for

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

例

<html>
   <head>
    <title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Please Enter..."/>
         <h1 v-if = "items.length>0">列表</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保存数组中的值，并显示直到所有项完成为止。

输出效果：

VueJS-渲染

在检查项目时，这就是浏览器中显示的内容。在DOM中，我们看不到li元素的任何v-for指令。它显示没有任何VueJS指令的DOM。

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

<html>
   <head>
    <title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.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>

效果看看吧。

VueJS-渲染

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

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

在（a，index）中，a是值，而index是键。现在，浏览器显示将如以下屏幕快照所示。因此，借助索引可以显示任何特定值。

OK，本次课程到此结束。

作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/1014.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2020年11月4日 下午4:58
下一篇 2020年11月4日 下午5:51

相关推荐

发表回复

登录后才能评论