vue 修改了data里面的值但是data对于的input控件内容没有跟着改变

vue 修改了data里面的值但是data对于的input控件内容没有跟着改变


<div id="mbox">
            <h1>XXXXX<br/><br/>XXXXXXXXXXXXXXXX</h1>
        <input type="text" id="iobox" :value='io' />
        <div id="numbox">
            <input type="button" v-on:click='fun' id="" value="1" />
            <input type="button" v-on:click='fun' id="" value="2" />
            <input type="button" v-on:click='fun' id="" value="3" />
            <input type="button" v-on:click='fun' id="" value="4" />
            <input type="button" v-on:click='fun' id="" value="5" />
            <input type="button" v-on:click='fun' id="" value="6" />
            <input type="button" v-on:click='fun' id="" value="7" />
            <input type="button" v-on:click='fun' id="" value="8" />
            <input type="button" v-on:click='fun' id="" value="9" />
            <input type="button" v-on:click='fun' id="" value="10" />
            <input type="button" v-on:click='fun' id="" value="11" />
            <input type="button" @click='fun' id="" value="12" />
        </div>
        </div>
        </div>

var vm=new Vue({
    el:'#mbox',
    data:{
        io:'1234'
    },
    methods:{
        fun(v){
            var num=v.target.value;
            var io=this.io;
            io=num;
            console.log(io);
            return io;
        }
    }
})

img

你好,你的事件有触发吗

fun(v){
    var num=v.target.value;
    this.io=num;
}

最好 用v-model 实现input 绑定 v-model="io"