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 协议》,转载必须注明作者和本文链接
licoded
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!