JSFiddle - React, Tailwind, and code Playground

by Frank Hu

HTML

<div id="app">
   <div class="keyin">
     <h2>報名表</h2>
     name:<input type="text" v-model="name"><br/>
     phone:<input type="text" v-model="phone"><br/>
     <select v-model="languages">
        <option disabled value="">Favoriate Language</option>
        <option>Javscript</option>
        <option>Ruby</option>
        <option>Go</option>
    </select><br/>
    <p>第一次參與？</p>
    <input type="checkbox" id="yes" value="yes" v-model="question">
    <label for="yes">yes</label>
    <input type="checkbox" id="no" value="no" v-model="question">
    <label for="no">no</label>
      <br/>
      <button @click="add">Sumit</button>
      <br/><br/><br/><br/><br/>

   </div>
   <h3>資訊</h3>
   <p>搜尋：</p>
   <table class="content">
     <thead><tr>
        <th></th>
        <th>#</th>
        <th>name</th>
        <th>phone</th>
        <th>language</th>
        <th>question</th>
      </tr>
     </thead>
     <tbody>
     <tr v-for='item in informations' >
       <th><button @click="edit(item.name)">edit</button></th>
       <th># </th>
       <th>{{item.name}}</th>
       <th>{{item.phone}}</th>
       <th>{{item.languages}}</th>
       <th>{{item.question}}</th>
       <th><button @click="remove(item.name)">-</button></th>
     </tr></tbody>
   </table>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

CSS

body{
  padding: 1.5em;
}

table {
color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
width: 640px;
border-collapse:
collapse; border-spacing: 0;
}

td, th { border: 1px solid #CCC; height: 30px; } /* Make cells a bit taller */

th {
background: #F3F3F3; /* Light grey background */
font-weight: bold; /* Make sure they're bold */
}

td {
background: #FAFAFA; /* Lighter grey background */
text-align: center; /* Center our text */
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	informations: [
    	{ name: 'Frank',
      	phone: '123',
        languages: 'Javscript',
        question: ['no']
      },
    ],
  	name: '',
    phone: '',
    languages: '',
    question: []
  },
  methods:{
  	add: function(){
    	this.informations.push({
        name: this.name,
      	phone: this.phone,
        languages: this.languages,
        question: this.question
      })
    },
    remove: function(name){
    	const dataIndex = this.informations.findIndex(item => item.name === name);
      this.informations.splice(dataIndex, 1);
    },
    edit: function(){
    
    },
    order: {
    	
    }
  }
})