Vueコンポーネント一例
2845 ワード
はじめに
コンポーネントとは
例 順番付きリストのコンポーネント
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<order_lists
v-for="ol in order_lists"
v-bind:item="ol"
v-bind:key="ol.id">
</order_lists>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
Vue.component('order_lists', {
props: ['item'],
template: '<li>{{item.text}}</li>'
})
var app = new Vue ({
el: '#app',
data: {
order_lists: [
{ id: 0, text: 'aiueo' },
{ id: 1, text: 'kakikukeko' },
{ id: 2, text: 'sasisuseso' }
]
}
})
出力
<div id="app">
<ol>
<order_lists
// 配列を一つずつ取り出してolに代入
v-for="ol in order_lists"
// item(変数)にolを代入
v-bind:item="ol"
// kyeを設定
// 順番付きリストを扱う際はkeyを設定するのがベターらしい
v-bind:key="ol.id">
</order_lists>
</ol>
</div>
Vue.component('order_lists', {
// itemを取得後、テンプレートをレンダリング
// propsでデータを受け取ることができる.
props: ['item'],
template: '<li>{{item.text}}</li>'
})
Reference
この問題について(Vueコンポーネント一例), 我々は、より多くの情報をここで見つけました https://dev.to/kokitakishita/vuekonponento-li-3bnhテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol