Home > Web Front-end > JS Tutorial > body text

What are the loop traversal instructions in vue?

php中世界最好的语言
Release: 2018-06-07 14:50:43
Original
4485 people have browsed it

This time I will bring you what loop traversal instructions are in vue, and what are the precautions for vue loop traversal instructions. The following is a practical case, let's take a look.

The instruction used for loop traversal in vue is v-for

1.v-for traverses the array

(1) value in arr traverses the array Elements in

(2)(value,index) in arr Traverse the elements and array subscripts in the array

Run the code:

<body>
  <p class="box">
    <ul>
      <li v-for="value in arr">{{value}}</li><br> 
      <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     arr:["哈哈","嘻嘻","哼哼"]
   }
 });
</script>
</body>
Copy after login

Output result:

2.v-for traverse the json object

(1)value in json traverse the value in the json object

(2)(value,key) in json Traverse the values ​​and keys in the json object

(3)(value,key,index) in json Traverse the values, keys and indexes in the json object

Running code:

<body>
  <p class="box">
    <ul>
      <li v-for="value in json">{{value}}</li><br>
      <li v-for="(value,key) in json">{{value}}--{{key}}</li><br>
      <li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     json:{
       baidu:"百度",
       souhu:"搜狐",
       sougou:"搜狗"
     }
   }
 });
</script>
</body>
Copy after login

Output result:

3.v-for traverses integers

( 1)n in integer traverses 1~integer, integer starts from 1

(2)(n,index) in integer traverses 1~integer, integer starts from 1, index starts from 0

Running code:

<body>
  <p class="box">
    <ul>
      <li v-for="n in 3">{{n}}</li><br>
      <li v-for="(n,index) in 3">{{n}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     
   }
 });
</script>
</body>
Copy after login

Output result:

Of course, v-for can also be used in template, but I don’t want to write this

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to perform mvvm-simple two-way binding in actual projects

##How to use JS to get the latest 7 days and last 3 days date

The above is the detailed content of What are the loop traversal instructions in vue?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template