美文网首页
Vue.js 修饰符

Vue.js 修饰符

作者: Rinaloving | 来源:发表于2019-08-09 14:34 被阅读0次
与事件的修饰符类似,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

相关文章

  • Vue.js 事件修饰符

    事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventD...

  • vue事件修饰符和键盘事件

    修饰符 vue.js为v-on提供了多个修饰符,方便我们处理一些DOM事件的细节,并且修饰符可以串联使用。主要的修...

  • VUE注意点

    Vue.js 为 v-on 提供了事件修饰符 .stop .prevent .capture .self .onc...

  • 前端小白学习Vue.js心得分享

    一,事件修饰符 事件修饰符有很多种类,在我们Vue.js官网跟我们列出来了很多修饰符,再加上我自己在网上搜的一些修...

  • 4. Vue 事件修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault...

  • vue的事件修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault...

  • vue.js 修饰符

    1、 .lazy在默认情况下, v-model在input事件中同步输入框的值与数据,但是,你可以添加一个修饰符l...

  • Vue.js 修饰符

    与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机 .lazy: 这时 message 并不是实...

  • vue实现点击其他地方隐藏div

    方法一: 通过监听事件 方法二(比较好): 方法三: 总结: 通过vue.js 事件的.stop修饰符可以阻止事件...

  • Vue.js表单修饰符

    1、 .lazy 修饰符。 默认情况下,v-model在input事件中同步输入框的值与数据,通过添加修饰符...

网友评论

      本文标题:Vue.js 修饰符

      本文链接:https://www.haomeiwen.com/subject/pbchjctx.html