Vue 修饰符和表单结构

最新推荐文章于 2024-03-12 18:27:19 发布

blockchain beginner

最新推荐文章于 2024-03-12 18:27:19 发布

阅读量266

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45783437/article/details/127837117

版权

lazy修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。
意思是当我们在input输入框输入数据时，v-model绑定的值不会发发生变化，但是当我们停止输入，输入框失去焦点或者按下回车时，v-model绑定的值才会发生变化，即在“change”时而非“input”时更新：

实例

<body>
    <div id="app">
        <input type="" v-model.lazy="msg">
        <span>{{msg}}</span>
    </div>
   
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'6'
            }
        })
    </script>
</body>

效果

number修饰符

自动将用户的输入值转为数值类型。
这个修饰符通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat() 解析，则会返回原始的值。即虽然你输入的是数字，但它的类型其实是String：

实训

<body>
    <div id="app">
        <input type="number" v-model.number="age">
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>

结果

trim修饰符

自动过滤用户输入内容的首尾空白字符

实例

</head>
<body>
    //屏蔽空格
    <div id="app">
        <input type="text" v-model.trim="msg">
        <span>已输入{{msg.length}}个字符</span>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>

效果

表单的组成

提示性文字：提示用户如何操作（一般由placeholder属性完成）
表单域：相当于一个容器，包含若干表单控件
表单控件：具体的功能项（按钮，下拉列表，输入框等）

表单组件

 
    <!-- type="text"(类型=文本)文本输入框，用于登录页面输入用户名 -->
    文本输入：<input type="text"><br>
 
    <!--type="password"(类型=密码）密码输入框，用于输入密码，显示***。--> 
    输入密码：<input type="password"> <br> 
    
    <!-- type="file"(类型=文件）上传文件处，用于文件的选择和上传。--> 
    选择文件：<input type="file"> <br> 
    
    <!--type="checkbox"(类型=复选框）用于某项选择的打开或关闭。-->
     反复选择：<input type="checkbox"><br>
     
    <!-- type="radio"(类型=发送）只能选择一次--> 
    唯一选择：<input type="radio"> <br>
    
    <!--type="image"(类型=图片）将图片定义为提交按钮-->
     图片提交：<input type="image"src="图片路径"> <br> 
     
    <!--type="submit"(类型=提交）专门用于提交表单的button按钮-->
     提交按钮：<input type="submit"> <br>
     
    <!--type="month"(类型=月份）定义year(年）和month(月）-->
     选择月份：<input type="month"> <br> 
     
     <!--type="number"(类型=数字）只能选择/输入数字-->
      选择数字：<input type="number"> <br>
      
      <!-- type="time" (类型=时间） 定义分秒--> 
      选择时间：<input type="time"> <br> 
      
      <!-- type="week"(类型=周）定义年月周--> 
      选择周：<input type="week">