What are the loop traversal instructions in vue?-JS Tutorial-php.cn

What are the loop traversal instructions in vue?

php中世界最好的语言

Release： 2018-06-07 14:50:43

Original

4467 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!