<template>
<div v-for="data in List" :key="data.page" class="list" :id="'page-' + data.page">
何かの表示
</div>
<template>Vue.jsのループ（v-for）で、ループ要素に連番IDをつける方法です。上記の例は、data.pageに連番が付与されていて、その番号をバインドしたidに付与しているだけです。簡単ですね。
v-forで要素の連番をつける
2019.8.15
JAVASCRIPTの新着コード
-
JAVASCRIPT Vue.js 3でdayjsをグローバルに組み込む方法import { createApp } from 'vue' import App from './App.vue' import dayjs from 'dayjs'; const app = createApp(App); app.config.globalProperties.$dayjs = dayjs app.mount('#app') -
JAVASCRIPT Vue.js 3でのmain.jsの書き方import { createApp } from 'vue' import App from './App.vue' import routes from './routes' import { store } from './stores/' const app = createApp(App); app.use(routes); app.use(store); app.mount('#app') -
JAVASCRIPT Vue.jsのコンポーネントで外部scriptをロードする方法<template> <p id="exscript"> <ins class="banner"></ins> </p> </template> <script> export default { mounted() { let scriptEl = document.createElement('script') scriptEl.setAttribute('src', 'スクリプトのURL') document.getElementById('exscript').appendChild(scriptEl) } } </script> -
JAVASCRIPT Gridsomeコマンドを短くして使う方法{ "name": "hoge", "scripts": { "build": "gridsome build", "develop": "gridsome dev", "lint": "vue-cli-service lint", "deploy": "gridsome build && netlify deploy --dir=dist/ -p" } }