一文带你学会Vue3 表单

一文带你学会Vue3 表单
一文带你学会Vue3 表单
1.Vue3表单概述

我们可以用 v-model 指令在表单、</code> 及 <code><select></code> 等元素上创建<a href="https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"双向数据绑定\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"双向数据绑定\"}"}" data-tit="双向数据绑定" data-pretit="双向数据绑定">双向数据绑定</a>。 <code>v-model</code> 会根据控件类型自动选取正确的方法来更新元素。 <code>v-model</code> 会忽略所有表单元素的 <code>value、checked、selected</code> 属性的初始值，使用的是 <code>data</code> 选项中声明初始值。 <code>v-model</code> 在内部为不同的输入元素使用不同的属性并抛出不同的事件： <ul><li>text 和 textarea 元素使用 value 属性和 input 事件；</li><li>checkbox 和 radio 使用 checked 属性和 change 事件；</li><li>select 字段将 value 作为属性并将 change 作为事件。</li></ul> <hr> <h2><a name="t2"></a><a id="2input__textarea__vmodel__18"></a>2.input 和 textarea 元素中使用 v-model 实现双向数据绑定</h2> 代码： <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div id="app"> <p>input元素：</p> <input v-model="message" placeholder="改动一下我试试吧..."> <p>{{ message }}</p> <p>textarea元素：</p> <textarea v-model="info" placeholder="改动一下我试试吧..."></textarea> <p>{{ info }}</p> </div> <script> const app = { data() { return { message: '', info: 'CSDN - dahezhiquan' } } } Vue.createApp(app).mount('#app') </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li></ul></pre> 演示效果，成功实现了数据的<a href="https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"双向绑定\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"双向绑定\"}"}" data-tit="双向绑定" data-pretit="双向绑定">双向绑定</a>： <img src="https://1000bd.com/contentImg/2024/04/12/6f4e54f1a9249042.png" alt="在这里插入图片描述"> <hr> <h2><a name="t3"></a><a id="3_51"></a>3.复选框绑定</h2> 代码： <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="imustctf" value="Imustctf" v-model="checkedNames"> <label for="imustctf">Imustctf</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> const app = { data() { return { checked: false, checkedNames: [] } } } Vue.createApp(app).mount('#app') </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li></ul></pre> 效果展示： <img src="https://1000bd.com/contentImg/2024/04/12/a85b5c50243a8ba7.png" alt="在这里插入图片描述"> <hr> <h2><a name="t4"></a><a id="4select__91"></a>4.select 列表绑定</h2> 代码： <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div id="app"> <select v-model="selected"> <option value="">选择一个网站</option> <option value="www.baidu.com">baidu</option> <option value="www.google.com">Google</option> <option value="www.sougou.com">sougou</option> </select> <div> 选择的网站是: {{ selected }} </div> </div> <script> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> 展示效果： <img src="https://1000bd.com/contentImg/2024/04/12/0b0a99cf64bf39d3.png" alt="在这里插入图片描述"> <hr> <h2><a name="t5"></a><a id="5_125"></a>5.修饰符</h2> .lazy： 在默认情况下， <code>v-model</code> 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 <code>lazy</code> ，从而转变为在 change 事件中同步： <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <input v-model.lazy="msg" > <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> .number： 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 <code>v-model</code> 来处理输入值： <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><input v-model.number="age" type="number"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> .trim： 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 <code>v-model</code> 上过滤输入： <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><input v-model.trim="msg"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1312501">2023.9.23（对这一年过去几个月的总结）</a> <a href="/Article/Index/846977">如何在 R 中计算 Eta 平方</a> <a href="/Article/Index/1047586">Linux C获取本机IP</a> <a href="/Article/Index/832604">低代码平台的优势与不足之处</a> <a href="/Article/Index/730976">橘子学Flink01之Flink的前世今生</a> <a href="/Article/Index/803211">Spring基于Annotation装配Bean</a> <a href="/Article/Index/1288728">java基础-集合-ConcurrentHashMap源码学习</a> <a href="/Article/Index/1072855">循环for处理数据</a> <a href="/Article/Index/1261266">Hive 表注释乱码解决</a> <a href="/Article/Index/1269224">【大模型】更强的开源可商用的中英文大语言模型baichuan2来了，从零开始搭建</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/128210967 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

一文带你学会Vue3 表单

1.Vue3表单概述