vue- 基本操作 - 收集表单元素绑定的数据

2023-06-09
北京
本文字数：1646 字
阅读完需：约 5 分钟

用 vue 中的 v-model 收集表单里面的数据，不同的表单元素配合 v-model 会有不同的写法和技巧

本次的表单元素包括：文本框，单选，多选，下拉框，文本域

1 编写表单元素

首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域

input 输入框细节

这里有一个细节(小技巧)：表单编写 input 输入框的时候，通常会配合 label 标签使用并加上相关的 css 或或者 js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是 v-model 获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别

不加上 lable

页面的交互性很差，必须自己点击输入框才能获取到光标

加上 lable

查看页面，点击账号会跳进对应的输入框并获取光标

继续编写表单元素

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head><body>    <div id="root">        <form>            账号:<input type="text"><br/><br/>            密码:<input type="password"><br/><br/>            性别：            男<input type="radio" name="sex">            女<input type="radio" name="sex"><br/><br/>            爱好：            学习 <input type="checkbox"  name="">            打游戏 <input type="checkbox"  name="">            吃饭 <input type="checkbox"  name=""><br/><br/>            所属校区                <select>                    <option value="">请选择校区</option>                    <option value="beijing">北京</option>                    <option value="shanghai">上海</option>                    <option value="shenzhen">深圳</option>                    <option value="wuhan">武汉</option>                </select><br/><br/>             其他信息                <textarea></textarea><br/><br/>               <input type="checkbox"> 阅读并接受<a href="#">《用户协议》</a>            <button>提交</button>        </form>           </div></body>
<script type="text/javascript">     const vm=  new Vue({        el:'#root',        data:{                   }              })</script>
</html>