前回の記事では、条件に応じて要素の表示を切り替える「v-if」と「v-show」について紹介しました。 www.hanatare-papa.jp 今回は、配列やオブジェクトに格納されたデータを元に要素を繰り返し描画する「v-for」とHTML属性（srcやclassなど）をVueのデータと動的に連携させる「v-bind」について記事にしたいと思います。前提としてこの記事では、Vue3での記法を前提とします。 記事のポイント v-forについて理解する。 v-bindについて理解する。 v-for：繰り返し処理を行う要素 v-forの基本的な使い方 オブジェクトの繰り返し 範囲の繰り返し key…
v-for 配列繰り返し <div id="app"> <ul v-for="week of weeks"> <li>{{ week }}</li> </ul> </div> <script> let app = new Vue({ el: "#app", data: { weeks: ['月', '火', '水', '木', '金', '土', '日'] } }) </script>
v-for 繰り返し構文 <div id="app"> <ul v-for="i of 繰り返したい数" :key="i"> <li>{{ i }}</li> </ul> </div> <script> let app = new Vue({ el: "#app" }) </script>
www.amazon.co.jp
www.jp.square-enix.com
www.amazon.co.jp
jehupc.exblog.jp
www.bbc.co.uk
qiita.com
www.kgc.co.jp
www.warnerbros.com
www.publickey1.jp
