tsukiyama-a5 tsukiyama-a5

## gist:807255d4343670a6a592b81541c08894
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
<body>
  <div id="app" v-show="age >= 20">
    {{name}}:{{age}}<br>
  </div>
  <script src="https://jp.vuejs.org/js/vue.js"></script>

## gist:30b1320511a0f5e692be08856574c389
<div id="app" v-show="age >= 20">
  {{name}}:{{age}}<br>
</div>

## gist:fa6ce08b6240e1b47073c4d0240bf5d2
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
<body>
  <div id="app">
    従業員番号:<input type="text" v-model="empid" placeholder="1,2,3のどれか"><br>
    {{empname}}<br>
  </div>

## gist:05215ec938ae927c9b0ad8bfe53957d9
computed: {
  empname: function() {
    switch (this.empid) {
      case '1':
        this.name = 'takahashi';
        break;
      case '2':
        this.name = 'higashiguchi';
        break;
      case '3':

## 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>

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

## 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:93c876ba9fa1bff6206dead4da0e7068
Vue.filter('format', function(value){
  return '御年' + value + '歳';
});

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

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

## 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: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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app" v-show="age >= 20">
	{{name}}:{{age}}<br>
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	computed: {
	empname: function() {
	switch (this.empid) {
	case '1':
	this.name = 'takahashi';
	break;
	case '2':
	this.name = 'higashiguchi';
	break;
	case '3':
	var app = new Vue({
	el: '#app',
	data: {
	name: 'ogura',
	age: 53
	},
	filters: {
	format: function(value) {
	return '御年' + value + '歳';
	}
	Vue.filter('format', function(value){
	return '御年' + value + '歳';
	});

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

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