Home  >  Article  >  Web Front-end  >  Vue.js common instructions - tutorial on looping the v-for instruction

Vue.js common instructions - tutorial on looping the v-for instruction

陈政宽~
陈政宽~Original
2017-06-28 15:36:291728browse

This article mainly introduces you to the relevant information about the common instructions of Vue.js, the loop use of v-for instructions. The article introduces it in detail through the example code, which has certain reference and learning value for everyone. Friends who need it Let’s take a look below.

Preface

In Vue.js, the v-for directive requires special syntax in the form of item in items, items is the source dataArrayAnd item is an alias for array element iteration.

v-for can bind data to an array to render a list:


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


Output:

##Use v-for in template:


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


Effect:

v-for can iterate data through the properties of an object:


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


Effect:

Script House


http://www.jb51.net


A wonderful life is waiting for you to create it!


#v-for iterates data through the properties of an object. You can provide the second parameter as the key name:


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


Effect:

name : Script Home


url : http ://www.jb51.net


slogan: A better life is waiting for you to create it!


#v-for Iterates data through the properties of an object, taking the third parameter as the 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>


Effect:

0 name: Script House


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


2 slogan: A better life is waiting for you to create it!


v-for can also loop integer


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


Effect:


1
2
3
4
5
6
7
8
9
10


Summary

The above is the detailed content of Vue.js common instructions - tutorial on looping the v-for instruction. For more information, please follow other related articles on the PHP Chinese website!

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