Vue用@input代替v-model实现数据绑定

v-model数据绑定用起来很舒服，但它不是万能的，比如textarea里面的内容好像就不能用v-model来实现动态绑定

用v-model实现的数据绑定

这里就是vue官网上对应的例子

<script src="https://unpkg.zhimg.com/vue"></script>
<div id="main">
    <div id="input">
        <input v-model="message">
    </div>
    <div id="result">
        {{message}}
    </div>
</div>
<script>
new Vue({
    el: '#main',
    data(){
        return{
            message: 'message'
        }
    }
})
</script>

用@input事件实现的数据绑定

@ 是 v-on:的简单写
另外，这里用@change不太好，因为change事件只有在input输入框失去焦点后才能被触发

现在想象一下，我们有一个新的场景需求，使用SpringBoot中的Thymelef模板开发网页，我们要在html中给定input的初值，而不是在js代码中；这时候v-model就不能用了，我在百度之后总结了用@change事件实现数据绑定的替代方案

<div id="main">
    <div id="input">
        <input @input="handleInput($event)">
    </div>
    <div id="result">
        {{message}}
    </div>
</div>

new Vue({
    el: '#main',
    data(){
        return{
            message: ''
        }
    },
    methods:{
        handleInput: function(e){
            this.message = e.target.value;
        }
    }
})

本作品采用《CC 协议》，转载必须注明作者和本文链接