What are the loop traversal instructions in vue?

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:

  <p>
    </p>

      
• {{value}}

　       
• {{value}}--{{index}}
    

   <script></script> <script> new Vue({ el:".box", data:{ arr:["哈哈","嘻嘻","哼哼"] } }); </script>

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:

  <p>
    </p>

      
• {{value}}

      
• {{value}}--{{key}}

      
• {{value}}--{{key}}--{{index}}
    

   <script></script> <script> new Vue({ el:".box", data:{ json:{ baidu:"百度", souhu:"搜狐", sougou:"搜狗" } } }); </script>

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:

  <p>
    </p>

      
• {{n}}

      
• {{n}}--{{index}}
    

   <script></script> <script> new Vue({ el:".box", data:{ } }); </script>

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!