Vue初学13-v-model修饰符

最新推荐文章于 2024-05-30 08:47:53 发布

置顶周达

最新推荐文章于 2024-05-30 08:47:53 发布

阅读量284

点赞数 1

分类专栏： vue 文章标签： v-model修饰符

本文链接：https://blog.csdn.net/gis_zhouda/article/details/105064660

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

lazy修饰符

默认情况下，v-model完成绑定后会同步更新data中的数据，通过lazy修饰符可以延迟更新，等到失去焦点或者按了回车键后再更新。如下：

      <div id="app">
          <input id="mess" v-model.lazy="message"/>
          <p>您输入的是：{{message}}</p>
      </div>

       <script>
            const vue = new Vue({
                el:'#app',
                data:{
                    message:'哈哈哈哈'
                }
            });
       </script>

效果如下：要等到输入框失去焦点后才会更新data中的数据

number修饰符

默认情况下，v-model绑定后，data中的数据是以string的类型存储的，通过number修饰符可以让输入数据以数字的形式存储。

      <div id="app">
          <input id="num" type="number" v-model.number="number"/>
          <p>您输入的是：{{number}}</p>
      </div>

       <script>
            const vue = new Vue({
                el:'#app',
                data:{
                    number:0
                }
            });
       </script>

效果如下：

trim修饰符

trim修饰符用于去掉输入值的前后空格，如下

      <div id="app">
          <input id="name" v-model.trim="name"/>
          <p>您输入的是：{{name}}</p>
      </div>

       <script>
            const vue = new Vue({
                el:'#app',
                data:{
                    name:''
                }
            });
       </script>

效果如下：