JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.0.0/dist/vue.js"></script>
<div id="demo">
 <p>{{message}}
 </p>
 <button v-on:click="click">
 Click
 </button>
 <!-- inputイベントだと入力した内容が即座に反映される -->
 <input v-model="message" v-on:input="name = $event.target.value"/>
 <!-- changeイベントだと入力した内容がフォーカスアウト時に反映される -->
<!--  <input v-model="message" v-on:change="name = $event.target.value"/> --> 
 <input v-model="message" v-on:change="updateName($event)"/>
 <p>
  {{name}}:{{price * 1.08}}円
 </p>
 <p>
  {{name}}:{{priceWithTax}}円
 </p>
 <li v-for="item in items" v-bind:key="item.name">
   <p>{{item.name}}:{{item.price}}</p>
 </li>
 <!-- v-showの条件式がfalseの場合、DOMは生成されているが見えない  -->
 <p v-show="isValid" v-bind:class="{'error' : isValid}"
 v-bind:style="{'border': (isValid ? style_ : '1px solid black')}"
 >
   valid
 </p>
 <p v-show="!isValid">
   invalid
 </p>
 <!-- v-showの条件式がfalseの場合、DOMは生成されない  -->
 <p v-if="isValid">
   valid
 </p>
</div>

CSS

.error{
  color: red;
}

JavaScript

// todo: classのkey変数定義の仕方
// todo: styleのkey変数定義の仕方
const name = 'みかん'
const vm = new Vue({
	el: '#demo',
  data: {
  name,
  price: 100,
  class_: 'error',
  style_: 'solid black 1px',
  message: 'hello world!',
  items:[{name: 'test', price: 120}]
 },
  computed:{
    // arrow関数だと動かない。
    // おそらくthis空間が固定されるから.
  	priceWithTax: function(){
    return this.price * 1.08
    },
    isValid: function(){
    	return this.name.length > 0
    }
  },
  methods:{
  	updateName: function(event){
    	this.name = event.target.value
    },
    click: function(){
    	alert('yeeeeeeeeeeeeeee')
    }
  }
})

window.vm = vm;

// vm.プロパティ名でvmのdataにアクセスできる
/* setTimeout(()=>{
  window.vm.name = ''
},3000) */