Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@akari_0618

Vue.js~v-for~

概要

JSでは、イベント(ユーザーがクリックしたときなど)に処理(イベントハンドラーと言います)が始まります。
その際に、クリックイベントを取得することにより実行することができました。Vue.jsでも記述は多少異なりますが仕組みは変わりません。
繰り返し処理についての記事です。

繰り返し処理

Vue.jsでは、繰り返し処理の際に[v-for]を使用します。

HTML

index.html
<ul>
  <li v-for="list in lists">{{ list }}</li>
</ul>

構文は以下のようになります。

v-for="仮変数 in 任意の配列"

配列listsから順に要素を取り出します。
マスタッシュ構文に変数listを格納します。
このlistの中にlistsの配列の中身がなくなるまで繰り返し処理されます。

Vue

index.js
data:{
  lists:[
    'list1',
    'list2',
    'list3'
  ]
}

index番号

インデックス番号を取得します。

index.html
<ul>
  <li v-for="(list,i) in lists">{{ list + i }}</li>
</ul>

//list1 0
//list2 1
//list3 2

配列要素+インデックス番号で取得することが出来ます。

番外編for文

index.js
<span v-for="i in 10">{{i }}</span>

//12345678910
0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
akari_0618
最近駆け出したエンジニアなーすです。 初心者のための初心者による初心者に関しての技術ブログになってます。 Twitter(@pro_ai_01)フォローするとモチベが上がり、インスタ(pro_ai)フォローするとこれまたモチベ上がります。Qiitaフォローするとまたモチベも上がり理解も深まります。 人生もプログラミングも一石三鳥ぐらいでいい感じに行きましょ😎
arkth
AI,IoT,WEBシステムの開発を行っています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?