【Vue.js】Vue.jsでstyleをv-bind【v-bind:style】

f:id:duo-taro100:20160218004611p:plain

Vue.jsでstyleに対してバインディングの実装をしてみた。
以下はコンポーネント内でも使っているサンプル。
これで動的にスタイル変更も可能。
本来はstyleではなく、classでやったほうがよさそうだけど。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Vue.jsでstyleをバインディング/title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p v-bind:style="{color : styles}">ピンク</p>
		<style-bind></style-bind>
	</div>
</body>
<script>

Vue.component('styleBind', {
	template:
		'<ul>'+
			'<li v-for="obj in objs" v-bind:style="{color : obj.color}">{{obj.name}}</li>'+
		'</ul>',
	data : function(){
		return {
			styleProp : 'color',
		    objs : 
		    [
		    	{
		    		name: '赤',
		    		color: 'red',
		    	},
		    	{
		    		name: '青',
		    		color: 'blue',
		    	},
		    	{
		    		name: '黄',
		    		color: 'yellow',
		    	},

		    ]
		}
	}
})


var app = new Vue({
  el: '#app',
  data: {
  	styles : 'pink'
  }
})
</script>
</html>