Vue中v-model指令的常用修饰符

v-model指令有三个可以选用的修饰符：.lazy、.number以及.trim。vue官方对此的描述为：

  • .number-输入字符串转为有效的数字
  • .lazy-取代input监听change事件
  • .trim-输入首尾空格过滤

　　官方链接：https://cn.vuejs.org/v2/api/#v-model

这三个修饰符的使用实例：（可尝试复制运行但需要正确的vue路径）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <!-- lazy修饰符  点击回车或者失去焦点时才发生数据响应 -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>
        <!-- number修饰符 将输入的内容直接作为number类型使用-->
        <input type="number" v-model.number="age">
        <h2>{{age}} {{typeof age}}</h2>
        <!-- trim修饰符 去除左右两边的空格 -->
        <input type="text" v-model.trim="trim">
        <h2>{{trim}}</h2>
    </div>
                
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:'#div1',
            data:{
                message:'修饰符',
                age:20,
                trim:''
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>

 

posted @ 2020-07-14 20:49  闻风听雨  阅读(1475)  评论(0)  编辑  收藏  举报