Vue研习录（06）——表单输入绑定详解及示例分析

• • 版权声明
  • 一、监听事件
  • 二、修饰符
  • • 1、 .lazy
    • 2、 .trim
    • 3、 .number
  • 三、其他表单事件
  • • 1、多行文本
    • 2、复选框
    • 3、单选按钮
    • 4、下拉列表

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

  重拾前端记忆，记录学习笔记，现在进入表单输入绑定部分

一、监听事件

  我们可以使用v-model 指令在表单的 <select>标签上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，v-model负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理，示例如下：</p> <pre><code class="prism language-html"><template><div class="hello"><input type="text" v-model="message"><p>message is : {<!-- -->{ message }}</p></div> </template><script> export default {<!-- -->data() {<!-- -->return {<!-- -->message : ""}} } </script> </code></pre> <p>  结果如下，v-model会自动监听我们的输入值并赋值给message在页面上予以展示：</p> <p><img src="https://img.pic99.top/hhfamen/202404/f1423582c93dec5.png" alt="在这里插入图片描述" /></p> <h2>二、修饰符</h2> <h3>1、 .lazy</h3> <p>  在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。我们可以使用.lazy修饰符，从而转为在change事件之后进行同步，示例如下：</p> <pre><code class="prism language-html"><template><div class="hello"><input type="text" v-model.lazy="message"><p>message is : {<!-- -->{ message }}</p></div> </template><script> export default {<!-- -->data() {<!-- -->return {<!-- -->message : ""}} } </script> </code></pre> <p>  结果如下，v-model会在输入完毕并“回车”，输入框失去焦点之后才会获取输入的内容：</p> <p><img src="https://img.pic99.top/hhfamen/202404/80506f804911.png" alt="在这里插入图片描述" /></p> <h3>2、 .trim</h3> <p>  我们可以使用.trim修饰符来自动过滤用户输入的首尾空白字符，示例如下：</p> <pre><code class="prism language-html"><template><div class="hello"><input type="text" v-model.trim="message"><p>message is : {<!-- -->{ message }}</p></div> </template><script> export default {<!-- -->data() {<!-- -->return {<!-- -->message : ""}} } </script> </code></pre> <p>  结果如下，当我们在首尾输入空白字符时，会自动过滤：</p> <p><img src="https://img.pic99.top/hhfamen/202404/a3a1542cbec275c.png" alt="在这里插入图片描述" /></p> <h3>3、 .number</h3> <p>  如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入。<br />   如果该值无法被 parseFloat() 处理，那么将返回原始值。<br />   number 修饰符会在输入框有 type=“number” 时自动启用。</p> <h2>三、其他表单事件</h2> <h3>1、多行文本</h3> <pre><code class="prism language-html"><template><div class="hello"><textarea v-model="message" placeholder="add multiple lines">

Multiline message is:

{{ message }}