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 協議》，轉載必須註明作者和本文連結