Vue中文输入法实时更新数据值

本文最后更新于2024年03月18日，已超过185天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

使用v-model是，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新，如果希望总是实时更新，可以用@input来替代v-model。

<html>

<head>
    <title>Vue学习</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="message" placeholder="请输入">
        <input type="text" placeholder="实时更新" @input="handleInput">
        <p>
            {{message}}
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            methods:{
                handleInput:function(e){
                    this.message=e.target.value
                }
            }
        })
    </script>
</body>

</html>

朗读