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

Laughing
2021-02-21 / 0 评论 / 928 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年03月18日,已超过341天没有更新,若内容或图片失效,请留言反馈。

使用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>
0

评论 (0)

取消
  1. 头像
    along
    Windows 10 · Google Chrome

    ganxfenx感谢分享

    回复