tsukiyama-a5 tsukiyama-a5

## gist:d456dae75031afe4935ff1d49d406d4c
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
<body>
    <div id="app">
        {{price}}円
    </div>
    <script src="https://jp.vuejs.org/js/vue.js"></script>

## gist:d63922cdd32de033c877ab5342be66b7
data: {
  name: 'tsukiyama',
  age: '22'
}

## gist:0bc9fc6e3b160fa9afa5fda37d38600a
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
<body>
    <div id="app">
        {{name}}は{{age}}歳です
    </div>
    <script src="https://jp.vuejs.org/js/vue.js"></script>

## gist:570212a102673b6a49837c7bce82c5f8
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
<body>
    <div id="app">
        <div v-if='age==0'>{{name}}は生まれたてです</div>
        <div v-else>{{name}}は{{age}}歳です</div>
    </div>

## gist:dfcfb3165163cbb52f0dabb23100ba32
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
<body>
    <div id="app">
        <ul>
            <li v-for='employee in employees'>{{employee.name}}:{{employee.age}}歳</li>
        </ul>

## gist:b501cbdce906e876666c59bb9bf6260b
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
<body>
    <div id="app">
        {{name}}:{{age}}歳<br>
        <button v-on:click='plus'>足す</button>
        <button v-on:click='minus'>引く</button>

## gist:93c876ba9fa1bff6206dead4da0e7068
Vue.filter('format', function(value){
  return '御年' + value + '歳';
});

// new Vueより上にコーディングすること

var app = new Vue({
  el: '#app',
  data: {
    name: 'ogura',

## gist:76264aa7df36fbb7407daa69b979c5e9
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
<body>
  <div id="app">
    {{name}}:{{age|format}}
  </div>
  <script src="https://jp.vuejs.org/js/vue.js"></script>

## gist:80a5e6642153faf1bd112d811a54303c
  var app = new Vue({
    el: '#app',
    data: {
      name: 'ogura',
      age: 53
    },
    filters: {
      format: function(value) {
        return '御年' + value + '歳';
      }

## gist:dabaecdb244aa1e84ff8056235fce2c4
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
<body>
  <div id="app">
    {{name}}:{{age|format}}
  </div>
  <script src="https://jp.vuejs.org/js/vue.js"></script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	{{price}}円
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	Vue.filter('format', function(value){
	return '御年' + value + '歳';
	});

	// new Vueより上にコーディングすること

	var app = new Vue({
	el: '#app',
	data: {
	name: 'ogura',