Vue.js 修饰符

与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机
.lazy:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>修饰符</title>
</head>
<body>

    <!--自动识别最新稳定版本的Vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <!--.lazy 在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中
    介绍的中文输入法情况外),使用修饰符 .lazy 会转变为在 change事件中同步,示例-->
    <div id="app">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:''
            }
        })
    </script>


</body>
</html>

这时 message 并不是实时变化的,而是在失去焦点和按回车键才更新
lazy.png
.number:

    <!--.number: 使用修饰符.number 可以将输入转换为Number类型,否则虽然输入
    的是数字,但它的类型其实是String,比如在数字输入框时会比较有用,示例-->
    <div id="app2">
        <input type="number" v-model.number="message">
        <p>{{ typeof message }}</p>
    </div>

    <script>
        var app = new Vue({
            el:'#app2',
            data:{
                message:123
            }
        })
    </script>

number.png
.trim:
    <!--.trim 修饰符 .trim 可以自动过滤输入的首尾空格,示例-->
    <div id="app3">
        <input type="text" v-model.trim="message">
        <p>{{ message }}</p>
    </div>

  <script>
        var app = new Vue({
            el:'#app3',
            data:{
                message:''
            }
        })
    </script>

trim.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容