vue的lazy修饰符和number修饰符、表单结构

PCthedream

已于 2022-10-29 16:49:36 修改

阅读量453

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

于 2022-10-29 16:47:15 首次发布

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/127588934

本文详细介绍了Vue.js中的lazy、number和trim修饰符在表单处理中的作用，以及表单的构成，包括表单域和各种表单控件的使用，如input、select和textarea。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的lazy修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步。

意思是什么呢，就是说当我们在input输入框输入数据时，v-model绑定的值不会发发生变化，但是当我们停止输入，输入框失去焦点或者按下回车时，v-model绑定的值才会发生变化，即在“change”时而非“input”时更新：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!--事件修饰符.lazy（懒惰）不会即时的将输入框的内容存放入data--><input v-mode1. lazy="msg">
        <span>{{ msg }}</span>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '111'
            }
        })
    </script>

</body>

</html>

vue的number修饰符

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

<template>
  <div>
      <h3>.number修饰符</h3>
      <input type="number" v-model.number="value">
      <p>该数据类型是：{{ typeof(value) }}</p>
  </div>
</template>

<script>
  export default {
      data(){
          return{
            value:''
          }
      }
  }
</script>

vue的trim修饰符

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

<template>
  <div>
      <h3>.trim修饰符</h3>
      <input type="text" v-model.trim="value">
      <p>value的长度是：{{ value.length }}</p>
  </div>
</template>

<script>
  export default {
      data(){
          return{
            value:''
          }
      }
  }
</script>

表单的构成

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

表单域

<form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名">

表单内容

</form>

表单控件

（1）input：输入框。都有value属性，通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框：<input type="text" id=" " value=" " placeholder="提示信息" >
密码框：<input type="password" placeholder="提示信息">
数字输入框：<input type="number> （input后面的属性如上）
日期输入框：<input type="date">
颜色输入框：<input type="color">
文件选择框（通常用于上传文件）：<input type="file" >
单选按钮：<input type="radio" name="按钮名称" checked> 文本（check是让表单进入后先默认选择此选项 name值相同则是让此文本选项为单选，不可同时选择相同name值的选项）
复选按钮：<input type="checkbox" value="按钮显示出来的内容" id=" "> （此处的value表示的事按钮显示出来的文本内容）
提交按钮：<input type="submit" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
重置按钮：<input type="reset" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
普通按钮：<input type="button" value="按钮上显示出来的内容">

（2）select：下拉列表

<select>

<option value="值1">选项1</option>

<option value="值2">选项2</option>

<option value="值3">选项3</option>

</select>

（3）textarea：文本框（多行文本输入框，用户可以调节放大缩小）

<textarea rows="行数" cols="列数"/>

表单代码：

<body>
    <font color="red" face="" size="5">
        <p style="text-align: center;">用户注册表单</p>     /*标题*/
    </font>
    <hr color="black" width="1000" size="2">       /*水平分割线*/
    <form action="#" method="GET">                 /*后端服务器*/
    <table style="text-align: center;">            /*创建一个表格,将内容设置为居中*/
        <tr>
            <td>
                <label>用户名：</label>
            </td>
            <td style="text-align: left;" width="500">
                <input type="text" placeholder="请输入用户名">
            </td>
            <td>
                <font color="red" size="1">用户名长度为4-16个字符</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>密&nbsp;&nbsp;&nbsp;码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请输入密码">
            </td>
            <td>
                <font color="red" size="1">密码长度为6个字符</font>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;" width="400">
                <label>确认密码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请确认密码">
            </td>
            <td>
                <font color="red" size="1">重复密码</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>性别：</label>
            </td>
            <td style="text-align: left;">
                <input type="radio" name="sex" id="r1" value="1" checked>  /*单选按钮*/
                <label for="r1">男</label>
                <input type="radio" name="sex" id="r2" value="0">
                <label for="r2">女</label>
            </td>
        </tr>
        <tr>
            <td>
                <label> 出生日期：</label>
            </td>
            <td style="text-align: left;">
                <input type="date">
            </td>
        </tr>
        <tr>
            <td>
                <label>爱好：</label>
            </td>
            <td style="text-align: left;">
                <input type="checkbox" value="体育" id="ch1">    /*复选按钮*/
                <label for="ch1">游泳</label>
                <input type="checkbox" value="旅游" id="ch2">
                <label for="ch2">旅游</label>
                <input type="checkbox" value="音乐" id="ch3">
                <label for="ch3">音乐</label>
                <br><br>
                <input type="checkbox" value="影视" id="ch4">
                <label for="ch4">影视</label>
                <input type="checkbox" value="追星" id="ch5">
                <label for="ch5">追星</label>
                <input type="checkbox" value="写作" id="ch6">
                <label for="ch6">写作</label>
            </td>
            <td>
                <font color="red" size="1">至少选择三项</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>个人介绍：</label>
            </td>
            <td style="text-align: left;">
                <textarea cols="20" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label>验证码：</label>
            </td>
            <td style="text-align: left;">
                <input type="number" placeholder="请输入验证码">
                <label>791216</label>
            </td>
            <td>
                <font color="red" size="1">请输入验证码</font>
            </td>
        </tr>
        <tr rowspan="3" style="text-align: right;">
            <td >
                <input type="file">
            </td>
        </tr>
    </table>
    <hr color="black" width="1000" size="2">
    <table>
        <tr rowspan="3" style="text-align: right;">  /*此处rowspan是使单元格跨行*/
            <td width="1100">
            <input type="submit" value="确认">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
            </td>
        </tr>
    </table>
    </form>
</body>