tsukiyama-a5/gist:fa6ce08b6240e1b47073c4d0240bf5d2

## gistfile1.txt
<!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>
  <script src="https://jp.vuejs.org/js/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        name: '',
        empid: ''
      },
      computed: {
        empname: function() {
          console.log(this.empid);
          switch (this.empid) {
            case '1':
              this.name = 'takahashi';
              break;
            case '2':
              this.name = 'higashiguchi';
              break;
            case '3':
              this.name = 'taniguchi';
              break;
            default:
              this.name = '';
              break;
          }
          return this.name + ':' + this.empid;
        }
      }
    });
  </script>
</body>
</html>
	<!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>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	name: '',
	empid: ''
	},
	computed: {
	empname: function() {
	console.log(this.empid);
	switch (this.empid) {
	case '1':
	this.name = 'takahashi';
	break;
	case '2':
	this.name = 'higashiguchi';
	break;
	case '3':
	this.name = 'taniguchi';
	break;
	default:
	this.name = '';
	break;
	}
	return this.name + ':' + this.empid;
	}
	}
	});
	</script>
	</body>
	</html>