Vue.js 일반 지침 - v-for 명령 반복에 대한 튜토리얼-JS 튜토리얼-php.cn

Vue.js 일반 지침 - v-for 명령 반복에 대한 튜토리얼

陈政宽～

풀어 주다： 2017-06-28 15:36:29

원래의

1742명이 탐색했습니다.

이 글에서는 주로 Vue.js의 일반적인 명령어, v-for 명령어의 루프 사용에 대한 관련 정보를 소개합니다. 이 글에서는 모두가 참고할 수 있고 학습할 가치가 있는 예제 코드를 통해 자세히 소개합니다. 필요한 사람은 아래에서 읽어보세요.

Preface

Vue.js에서 v-for 지시어에는 항목의 항목 형식으로 특수 구문이 필요하며 항목은 소스 데이터 array이고 항목은 배열 요소 반복에 대한 별칭입니다.

v-for는 데이터를 배열에 바인딩하여 목록을 렌더링할 수 있습니다.

<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</p>

<script>
 new Vue({
  el: &#39;#wantuizhijia&#39;,
  data: {
   sites: [
    { name: &#39;网推之家&#39; },
    { name: &#39;谷歌&#39; },
    { name: &#39;淘宝&#39; }
   ]
  }
 })
</script>

로그인 후 복사

출력:

v-for 사용 템플릿에서 :

<p id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wantuizhijia&#39;,
  data: {
   places: [
    { name: &#39;厦门&#39; },
    { name: &#39;漳州&#39; },
    { name: &#39;福州&#39; }
   ]
  }
 })
</script>

로그인 후 복사

효과:

v-for는 객체의 property를 통해 데이터를 반복할 수 있습니다.

<p id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;http://www.jb51.net&#39;,
    slogan: &#39;美好生活，等待你的开创！&#39;
   }
  }
 })
</script>

로그인 후 복사

효과:

Script House

http://www.jb51.net

아름다운 삶이 당신의 창조를 기다립니다!

v-for는 객체의 속성을 통해 데이터를 반복합니다. 두 번째 매개변수를 키 이름으로 제공할 수 있습니다.

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;http://www.jb51.net&#39;,
    slogan: &#39;美好生活，等待你的开创！&#39;
   }
  }
 })
</script>

로그인 후 복사

효과:

name : Script Home

url: http://www.jb51.net

슬로건: 멋진 삶이 당신의 창조를 기다리고 있습니다!

v-for는 세 번째 매개변수를 index로 사용하여 개체의 속성을 통해 데이터를 반복합니다.

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;http://www.jb51.net&#39;,
    slogan: &#39;美好生活，等待你的开创！&#39;
   }
  }
 })
</script>

로그인 후 복사

효과:

0 이름: 스크립트 홈

1 url: http://www.jb51.net

2 슬로건: 더 나은 삶이 당신을 기다리고 있습니다!

v-for는 integers

<p id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</p>
<script>
new Vue({
el: ‘#wangtuizhijia&#39;
})
</script>
</body>

로그인 후 복사

효과:

로그인 후 복사

을 반복할 수도 있습니다.

요약

위 내용은 Vue.js 일반 지침 - v-for 명령 반복에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!