質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4463閲覧

vue.jsで、データを3つずつdivで囲みたい。

uma

総合スコア30

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/12/03 02:00

編集2015/12/03 02:02

###前提・実現したいこと
お世話になります。

以下のように、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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

computedで整形することで自己解決しました。

jade

1// jade 2 body 3 #app 4 .outer(v-for="set in arranged") 5 span.item(v-for="item in set") {{ item.name }}

javascript

1new Vue({ 2 el: '#app', 3 data: { 4 settings: { 5 slicePar: 3 // rawを切り分ける個数 6 }, 7 raw: [ 8 { name: "1" }, 9 { name: "2" }, 10 { name: "3" }, 11 { name: "4" }, 12 { name: "5" }, 13 { name: "6" }, 14 { name: "7" }, 15 { name: "8" }, 16 { name: "9" } 17 ], 18 }, 19 computed: { 20 // rawを[[],[],[]]の形に整形 21 arranged: function () { 22 let dist = [[]]; 23 24 this.raw.forEach((el, idx) => { 25 let tail = dist.length - 1; 26 27 dist[tail].push(el); 28 29 if (dist[tail].length > this.settings.slicePar - 1) 30 dist.push([]); 31 }); 32 33 return dist; 34 } 35 } 36});

投稿2015/12/05 10:15

編集2015/12/05 10:16
uma

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

http://qiita.com/HelloPeople/items/7db7c8f5e5ace3b40874
javascript テンプレートエンジンですね、vuc.js って?
上記リンクの jsRender なら触ったことがありますけど。ドキュメントやサンプルも充実してますよ。
vuc.js は知らないのでお役に立てません。
他の方に期待ですね。

投稿2015/12/03 03:40

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uma

2015/12/03 04:00 編集

回答ありがとうございます。vue.jsは簡易版angularjsのようなものです。vue.jsのテンプレートエンジンはmustacheを使用しているんですね。 mustacheを確認してみましたが、mustache自体は単に変数を展開するだけの機能しかないようでした。 ループや条件分岐などの機能はvue.js側の機能かと思います。回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問