vue之表单处理（二）

最新推荐文章于 2024-04-30 13:43:08 发布

IT小崽子

最新推荐文章于 2024-04-30 13:43:08 发布

阅读量318

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_52129860/article/details/129479998

版权

Vue.js 专栏收录该内容

13 篇文章

订阅专栏

vue之表单处理（二）

值绑定
修饰符
综合小练习
实验总结

值绑定

下面我们来学习如何进行表单元素值的初始化绑定。
文本和多行文本值绑定
直接在标签上指定 value 是不能成功的，会被 Vue 忽略。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" value="hello" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

正确模式，通过 JavaScript 在组件的 data 选项中声明初始值：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" />
      <br />
      <br />
      <br />
      <textarea v-model="msg"></textarea>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

单选按钮

checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当选中时，`picked` 为字符串 "a" -->
      <input type="radio" v-model="picked" value="a" />
      {{picked}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

复选框

复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当复选框选中时，toggle 的值为 true，未选中为 false -->
      <input type="checkbox" v-model="toggle" />
      {{toggle}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: false,
          };
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value=“yes” 和 false-value=“no” 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
      />
      <p>toggle:{{toggle}}</p>
    </div>
    <script>
      // 通过 true-value="yes" false-value="no" 属性控制，选中时 toggle 值为 yes，未选中时为 no
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: "",
          };
        },
      });
    </script>
  </body>
</html>

运行结果：请添加图片描述
如果你只想要选中有值，你可以这样做，true-value 属性指定值，false-value 属性设为空值。

<input type="checkbox" v-model="toggle" true-value="name" false-value="" />

选择框

选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当选中第一个选项时，selected 为字符串 "abc" -->
      <select v-model="selected">
        <!-- 固定赋值value -->
        <option value="abc">ABC</option>
        <!-- 使用 v-bind 绑定值 -->
        <option v-bind:value="optionValue">DEF</option>
      </select>
      <p>{{selected}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
            // 第二个 option 的值
            optionValue: "efg",
          };
        },
      });
    </script>
  </body>
</html>

运行效果：

请添加图片描述

修饰符

Vue 总结了日常开发中经常进行的表单处理业务，进行了封装，使用表单修饰符轻松解决一些表单处理的业务逻辑。

.lazy

开始介绍表单处理时，我们说了几点注意，不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，那么，我们怎么将 input 事件与 change 事件替换，可以使用 .lazy 修饰符，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。

例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <!--使用 .lazy 修饰符将文本框 抛出的事件改为 change 事件，不再实时更新，只有文本框失去焦点才更新数据 惰性更新 -->
      <input v-model.lazy="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

使用 .lazy 运行效果:
请添加图片描述

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <p>没有使用 .number 修饰符</p>
      <input v-model="number1" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number1)}}</p>
      <p>使用 .number 修饰符</p>
      <input v-model.number="number2" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number2)}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          number1: "",
          number2: "",
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

.trim

表单元素值首尾空格，自动过滤。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <input v-model.trim="msg" type="text" />
      <p>首尾空格被过滤了：{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

运行结果：
请添加图片描述

综合小练习

表单数据收集与绑定。请添加图片描述
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #app {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 400px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <form class="app-form">
        <span>name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <input type="text" v-model="username" />
        <br />
        <span>password:</span><input type="password" v-model="password" />
        <br />
        <span
          >sex:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        >
        <input type="radio" id="man" value="man" v-model="sex" />
        <label for="man">man</label>
        <input type="radio" id="woman" value="woman" v-model="sex" />
        <label for="woman">women</label>
        <br />
        <span>hobby:</span>
        <input type="checkbox" id="game" value="game" v-model="hobby" />
        <label for="game">game</label>
        <input
          type="checkbox"
          id="basketball"
          value="basketball"
          v-model="hobby"
        />
        <label for="basketball">basketball</label>
        <input type="checkbox" id="study" value="study" v-model="hobby" />
        <label for="study">study</label>
        <br />
        <br />
        <p>名字：{{username}}</p>
        <p>密码：{{password}}</p>
        <p>性别:{{sex}}</p>
        <p>爱好：{{hobby}}</p>
      </form>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
            password: "",
            sex: "man", // 性别单选默认勾选男
            hobby: [],
          };
        },
      });
    </script>
  </body>
</html>