BcRikko/index.html

## index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.jsでタグクラウドをつくる</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <div id="tag-cloud">
        <span v-repeat="tag :tags" class="tag" style="font-size:{{tag.fontSize}}px">{{tag.name}}</span>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

## index.js
var values = [
    { name: 'January', count: 6, fontSize: 0 },
    { name: 'February', count: 2, fontSize: 0 },
    { name: 'March', count: 5, fontSize: 0 },
    { name: 'April', count: 1, fontSize: 0 },
    { name: 'May', count: 4, fontSize: 0 },
    { name: 'June', count: 3, fontSize: 0 },
    { name: 'August', count: 6, fontSize: 0 },
    { name: 'September', count: 3, fontSize: 0 },
    { name: 'October', count: 3, fontSize: 0 },
    { name: 'November', count: 1, fontSize: 0 },
    { name: 'December', count: 7, fontSize: 0 }
];

new Vue({
    el: '#app',
    data: {
        tags: values
    },
    created: function(){
        var maxSize = 28;
        var minSize = 8;

        // tags.countを降順にソート
        var copyTags = values;
        copyTags.sort(function (a, b) {
            return b.count - a.count;
        });

        // タグの表示数
        var limits = copyTags.length < 5 ? copyTags.length : 5;

        var max = copyTags[0].count;
        var min = copyTags[limits - 1].count;

        // フォントサイズを決定し、表示する分だけthis.tagsに格納
        this.tags = [];
        for (var i = 0; i < limits; i++) {
            var perc = (max === min) ? 1 : (copyTags[i].count - min) / (max - min);
            var size = Math.round((maxSize - minSize) * perc + minSize);

            this.tags[i] = copyTags[i];
            this.tags[i].fontSize = size;
        }

        // tags.nameを昇順にソート
        this.tags.sort(function (a, b) {
            return (a.name > b.name) - (a.name < b.name);
        });
    }
});

## style.css
#tag-cloud {
    padding: 3px 3px;
    width: 300px;
    height: auto;
    text-align: center;
    background-color: gainsboro;
}

#tag-cloud span {
    padding: 0 3px;
    text-align: center;
    display: inline-block;
}
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Vue.jsでタグクラウドをつくる</title>
	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div id="app">
	<div id="tag-cloud">
	<span v-repeat="tag :tags" class="tag" style="font-size:{{tag.fontSize}}px">{{tag.name}}</span>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	var values = [
	{ name: 'January', count: 6, fontSize: 0 },
	{ name: 'February', count: 2, fontSize: 0 },
	{ name: 'March', count: 5, fontSize: 0 },
	{ name: 'April', count: 1, fontSize: 0 },
	{ name: 'May', count: 4, fontSize: 0 },
	{ name: 'June', count: 3, fontSize: 0 },
	{ name: 'August', count: 6, fontSize: 0 },
	{ name: 'September', count: 3, fontSize: 0 },
	{ name: 'October', count: 3, fontSize: 0 },
	{ name: 'November', count: 1, fontSize: 0 },
	{ name: 'December', count: 7, fontSize: 0 }
	];

	new Vue({
	el: '#app',
	data: {
	tags: values
	},
	created: function(){
	var maxSize = 28;
	var minSize = 8;

	// tags.countを降順にソート
	var copyTags = values;
	copyTags.sort(function (a, b) {
	return b.count - a.count;
	});

	// タグの表示数
	var limits = copyTags.length < 5 ? copyTags.length : 5;

	var max = copyTags[0].count;
	var min = copyTags[limits - 1].count;

	// フォントサイズを決定し、表示する分だけthis.tagsに格納
	this.tags = [];
	for (var i = 0; i < limits; i++) {
	var perc = (max === min) ? 1 : (copyTags[i].count - min) / (max - min);
	var size = Math.round((maxSize - minSize) * perc + minSize);

	this.tags[i] = copyTags[i];
	this.tags[i].fontSize = size;
	}

	// tags.nameを昇順にソート
	this.tags.sort(function (a, b) {
	return (a.name > b.name) - (a.name < b.name);
	});
	}
	});
	#tag-cloud {
	padding: 3px 3px;
	width: 300px;
	height: auto;
	text-align: center;
	background-color: gainsboro;
	}

	#tag-cloud span {
	padding: 0 3px;
	text-align: center;
	display: inline-block;
	}