vue-例3-15lazy.html

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章展示了在Vue.js环境中，如何使用v-model的lazy修饰符将输入事件(input)延迟至change事件触发更新，从而实现数据绑定的延迟更新。通过两个例子，分别演示了无lazy修饰符和带有lazy修饰符的input元素，对比说明了它们的区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazy</title>
</head>
<body>
    <div id="app">
        <h2>input事件</h2>
        <input type="text" v-model="msg">
        <span>Msg:{{msg}}</span>

        <h2>lazy延迟的事件从input到change</h2>
        <input type="text" v-model.lazy="msg">
        <span>Msg:{{msg}}</span>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               msg:''
           }
        });
    </script>
</body>
</html>