1. 首页
  2. 文档
  3. Vue.js实践
  4. 用@input代替v-model

用@input代替v-model

中文输入法输入,拼音阶段也能更新数据

第三方输入法貌似无效

 <div id="app">
    <!-- 中文输入法输入,拼音阶段也能更新数据 -->
    <!-- 带括号的是函数调用,直接立即执行函数;不带括号的是绑定事件,事件触发再执行。 -->
    <input type="text" @input="handleInput" placeholder="输入"> 
    <p>输入的内容是:{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:''
        },
        methods:{
            handleInput:function(e){
                this.message = e.target.value
            }
        }
    })
</script> 

以上 @input 其实执行的是 oninput 事件,类似:

<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>

<script>
    function myFunction() {
        var x = document.getElementById("myInput").value;
        document.getElementById("demo").innerHTML = "你输入的是: " + x;
    }
</script>