###前提・実現したいこと
お世話になります。
以下のように、vue.js(v1.0.10)でデータを任意の個数ごとにdivで囲いたいのですが、どのようにすれば良いか見当が付きません。
基本的な内容かとは思いますがご助言お願いします。
###ソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <style> 6 [v-cloak] { display: none; } 7 </style> 8</head> 9<body> 10 <div id="app" v-cloak> 11 <div> 12 <li v-for="item in items"> 13 {{ item.name }} 14 </li> 15 </div> 16 <!-- 本来生成したいhtml 17 <div> 18 <li>John</li> 19 <li>Mark</li> 20 <li>Ellsa</li> 21 </div> 22 <div> 23 <li>Jack</li> 24 <li>Fllora</li> 25 <li>Hellen</li> 26 </div> 27 <div> 28 <li>Woob</li> 29 <li>Yello</li> 30 </div> 31 --> 32 </div> 33 <script src="vue.min.js"></script> 34 <script> 35 var vm = new Vue({ 36 el: '#app', 37 data: { 38 items: [ 39 { "name": "John", "age": 30 }, 40 { "name": "Mark", "age": 20 }, 41 { "name": "Ellsa", "age": 19 }, 42 { "name": "Jack", "age": 26 }, 43 { "name": "Fllora", "age": 21 }, 44 { "name": "Hellen", "age": 18 }, 45 { "name": "Woob", "age": 28 }, 46 { "name": "Yello", "age": 40 } 47 ] 48 }, 49 methods: { 50 } 51 }); 52 </script> 53</body> 54</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。