<div id="app">
        <fieldset>
            <legend>this is a demo</legend>
            <div class="">
                <label>姓名：</label>
                <input type="text" name="" v-model="NewPerson.name">
            </div>
            <div class="">
                <label>年齡：</label>
                <input type="text" name="" v-model="NewPerson.age">
            </div>
            <div class="">
                <label>性別：</label>
                <select v-model="NewPerson.sex">
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            <div>
                <button @click="createPerson">創(chuàng)建</button>
            </div>
        </fieldset>
        <table>
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>性別</td>
                <td>刪除</td>
            </tr>
            <tr v-for="(person, key) of people">
                <td>{{ person.name }}</td>
                <td>{{ person.age }}</td>
                <td>{{ person.sex }}</td>
                <td :class="'text-center'"><button @click="deletePerson(key)">刪除</button></td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue ({
            el: '#app',
            data: {
                NewPerson: {
                    name: '',
                    age: 0,
                    sex: 'male'
                },
                people: [
                    {
                        name: 'A',
                        age: 10,
                        sex: 'male'
                    },
                    {
                        name: 'B',
                        age: 13,
                        sex: 'female'
                    },
                    {
                        name: 'C',
                        age: 15,
                        sex: 'female'
                    }
                ]
            },
                methods:{
                    createPerson: function(){
                        this.people.push(this.NewPerson);
                        this.NewPerson = {name: '', age: 0, sex: 'male'}
                    },
                    deletePerson: function(index){
                        console.log(index)
                        this.people.splice(index,1);
                    }
                }
    })
    </script>

<div id="main" @click="hideTooltip">
  <div class="tooltip" v-if="show_tooltip" @click.stop>
    <input type="text" v-model="text_content" />
  </div>
  <p @click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script type="text/javascript">
    var demo = new Vue({
  el: '#main',
  data: {
    show_tooltip: false, 
    text_content: 'Edit me.'
  },
  methods: {
    hideTooltip: function() {
      this.show_tooltip = false; 
    },
    toggleTooltip: function() {
      this.show_tooltip = !this.show_tooltip;
    }
  }
});
</script>

<div id="main">
    <nav @click.prevent>
        <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
    </nav>
    <p>You chose <b>{{active}}</b></p>
</div>
<script type="text/javascript">
    var vm = new Vue({
    el:'#main',
    data:{
        active:'HTML', 
        items:[ 
            {name:'HTML', active:true}, 
            {name:'CSS', active:false},
            {name:'JavaScript', active:false},
            {name:'Vue.js', active:false}
        ]
    },
    methods: {
        makeActive: function(item, index){
            this.active = item.name; 
        for(var i=0; i<this.items.length;i++){
            this.items[i].active = false;
        }
        this.items[index].active = true;
        }
    }
});
</script>