vue의 루프 순회 명령은 무엇입니까?-JS 튜토리얼-php.cn

vue의 루프 순회 명령은 무엇입니까?

php中世界最好的语言

풀어 주다： 2018-06-07 14:50:43

원래의

4466명이 탐색했습니다.

이번에는 Vue에서 어떤 루프 순회 명령어를 사용할 수 있는지, Vue 루프 순회 명령어에 대한 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

vue에서 루프 순회에 사용되는 명령은 v-for

1.v입니다. for는 배열을 순회합니다

(1)arr의 값은 배열의 요소를 순회합니다

(2)(value,index) arr에서 배열의 요소 및 배열 첨자를 트래버스합니다.

코드 실행:

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

로그인 후 복사

출력 결과:

2.v-json 객체를 트래버스합니다.

(1) json의 값은 에서 값을 트래버스합니다. json의 json 객체

(2)(value,key) json의 json 객체

(3)(value,key,index)의 값과 키를 탐색합니다. json의 값, 키, 인덱스를 탐색합니다. object

실행 코드:

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

로그인 후 복사

출력 결과:

3.v-for 정수 트래버스

(1)n 정수는 1~정수를 트래버스하고, 정수는 1

(2)(n부터 시작합니다. ,index) 정수는 1~정수를 순회하며 정수는 1부터 시작하고 인덱스는 0

코드를 실행하세요:

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

로그인 후 복사

출력 결과: