vue中 模板中元素的顯示隱藏該怎么實(shí)現(xiàn)？

為什么改變了值，v-if不觸發(fā)呢。

Vue.component('change-input',{
            props:['people','titles'],
            data: function(){
                return {
                    isInput1:false,
                    isSpan1:true
                }
            },
            template:`<table>
                <tr><th v-for="tit in titles">{{tit}}</th></tr>
                <tr v-for="items in people" v-once ref="items.id" :id="items.id" :key="items.id">
                    <td v-if="isSpan1" @click="addInput(items.id)">{{items.name}}</td>
                    <td v-if="isInput1" :class="active"><input type="text" @blur="addSpan"/></td>
                    <td>{{items.age}}</td>
                    <td>{{items.habit}}</td>
                    <td><button type="button" @click="showMsg(items,$event)">操作</button></td>
                </tr></table>`,
            methods:{
                addInput:function(id){
                    this.isInput1 = true;
                    this.isSpan1 = false;
                    console.log(id);
                    
                },
                addSpan:function(e){
                    alert(1);
                },
                showMsg:function(items){
                    console.log(items.name+":"+items.age)
                }
            }
        });

        var vm = new Vue({
            el:'#box',
            data:{
                title:['姓名','年齡','愛好','操作'],
                arr:[
                    {name:'王麻子',age:'12',habit:'ok',id:'J0002'},
                    {name:'武庫',age:'14',habit:'o12k',id:'J0003'},
                    {name:'李四',age:'24',habit:'aksjdkas',id:'J0004'}
                ],
                itemId:5,
            }
        })