前言：
此时兄弟们对“html单选按钮变成方形”大约比较讲究，各位老铁们都需要分析一些“html单选按钮变成方形”的相关知识。那么小编同时在网上网罗了一些有关“html单选按钮变成方形””的相关内容，希望我们能喜欢，兄弟们一起来学习一下吧！阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧！
01 简介
在日常开发中，我们经常需要对表单元素进行操作，对表单的数据收集和绑定也是很常见的工作。在以前开发时我们是通过直接操作DOM实现的，效率低下。而VUE框架为我们提供了v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。大大提高了开发效率。
02 基础用法
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
a）text和textarea元素使用value property和input事件
b）checkbox和radio使用checked property和change事件
c）select字段将value作为prop并将change作为事件
1）文本
通过v-model与input框进行双向绑定，实现数据的实时同步更新，具体使用方法如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <!--通过v-model绑定values值，input输入的值将在p标签中展示出来--> <input v-model="values" placeholder="请输出内容" /> <p>input输入的内容为: {{ values }}</p> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 values: "" }, }) </script> </body> </html> 2）多行文本
多行文本绑定与input绑定类似，具体使用如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <span>多行文本示例:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="请输入多行文本"></textarea> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 message: "" }, }) </script> </body> </html> 3）复选框
v-model同样可以对复选框进行双向绑定，具体示例如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <span>单选框示例:</span> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br> <span>多选框示例</span> <!-- 多选框绑定的变量需要是数组类型 --> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 checked: "", checkedNames: [] }, }) </script> </body> </html> 4）单选按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <span>单选按钮:</span> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 picked: '' }, }) </script> </body> </html> 5）选择框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <span>单选框示例:</span> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>单选框选中项: {{ selected }}</span> <br> <span>多选示例:</span> <!-- 跟复选框类似多选一般绑定的变量也必须数组类型 --> <select v-model="selectedMultiple" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>多选框选中项: {{ selectedMultiple }}</span> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 selected: '', selectedMultiple: [] }, }) </script> </body> </html> 03 值绑定对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串，v-bind具体使用如下所示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <!-- 直接bind对象 --> <option v-bind:value="{ number: 123 }">123</option> </select> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 selected: "" }, }) </script> </body> </html> 04 修饰符之前的文章中我们讲解了按键修饰符、系统修饰符同样VUE也提供了表单处理的修饰符，下面我们就一起来看看常用的表单处理修饰符。
1）.lazy修饰符
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后再进行同步，具体如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VUE基础教程</title> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg"> <p>input内容: {{msg}}</p> </div> <script> var vm = new Vue({ el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 data: { // 数据对象 msg: "" }, }) </script> </body> </html> 2）.number修饰符
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符
<input v-model.number="age" type="number">
这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
3）.trim修饰符
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<input v-model.trim="msg">05 总结
至此我们《VUE基础教程七》就讲完了，下篇内容主要讲解VUE的组件相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
相关阅读：
程序员都必掌握的前端教程之VUE基础教程（六） 程序员都必掌握的前端教程之VUE基础教程（五）
标签： #html单选按钮变成方形
