VUE3 之 表单元素
1. 概述
老话说的好：行动起来，原地观望是没有用的。
言归正传，今天我们来聊聊 VUE3 的 表单元素。
2. 表单元素
2.1 文本框与数据绑定
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message: "hello",}
},
methods : {
getMessage() {
console.info(this.message)
},
},
template : `
<div>
<input v-model="message" />
<button @click="getMessage">获取文本内容</button>
</div>
`
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
使用 v-model 将文本框与数据 message 关联
2.2 多行文本与数据绑定
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message: "hello",
}
},
methods : {
getMessage() {
console.info(this.message)
},
},
template : `
<div>
<textarea v-model="message" /><br>
<button @click="getMessage">获取文本内容</button>
</div>
`
与文本框相同，同样使用 v-model 与数据 message 绑定
2.3 单个 checkbox 与数据绑定
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
checkboxFlag: true,
},
methods : {
getCheckboxFlag() {
console.info(this.checkboxFlag)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxFlag" />checkbox<br>
<button @click="getCheckboxFlag">获取checkbox设置</button>
</div>
`
当 checkbox 被选中，值是 true，否则值是 false
2.4 自定义单个 checkbox 的值
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
checkboxFlag2: "选中",
}
},
methods : {
getCheckboxFlag2() {
console.info(this.checkboxFlag2)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxFlag2" true-value="选中" false-value="未选中" />checkbox<br>
<button @click="getCheckboxFlag2">获取checkbox设置</button>
</div>
`
使用 true-value 和 false-value 自定义 checkbox 的值
2.5 一组 checkbox 与数据绑定
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
checkboxArr: [],
}
},
methods : {
getCheckboxArr() {
console.info(this.checkboxArr)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxArr" value="football" />足球<br>
<input type="checkbox" v-model="checkboxArr" value="basketball" />篮球<br>
<input type="checkbox" v-model="checkboxArr" value="tableTennis" />乒乓球<br>
<button @click="getCheckboxArr">获取checkbox设置</button>
</div>
`
一组 checkbox 与同一个数据 checkboxArr 绑定，得到的结果是一个数组
2.6 一组 radio 与数据绑定
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
radioValue: "tableTennis",
}
},
methods : {
getRadioValue() {
console.info(this.radioValue)
},
},
template : `
<div>
<input type="radio" v-model="radioValue" value="football" />足球<br>
<input type="radio" v-model="radioValue" value="basketball" />篮球<br>
<input type="radio" v-model="radioValue" value="tableTennis" />乒乓球<br>
<button @click="getRadioValue">获取radio设置</button>
</div>
`
radio 是单选，因此得到的值是一个 字符串
2.7 select 与数据绑定
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
selectValue: "",
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option value="football">足球</option>
<option value="basketball">篮球</option>
<option value="tableTennis">乒乓球</option>
</select>
<br>
<button @click="getSelectValue">获取select设置</button>
</div>
`
在 select 标签上使用 v-model 绑定数据 selectValue
2.8 select 的选项从数据获得
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
selectOptionArr: [
{text: "足球", value: "football"},
{text: "篮球", value: "basketball"},
{text: "乒乓球", value: "tableTennis"}
],
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option v-for="item in selectOptionArr" :value="item.value">{{item.text}}</option>
</select>
<br>
<button @click="getSelectValue">获取select设置</button>
</div>
`
使用 v-for 得到 option 元素
2.9 select 的返回对象
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
selectOptionArr2: [
{text: "足球", value: {name:"football", text:"足球"}},
{text: "篮球", value: {name:"basketball", text:"篮球"}},
{text: "乒乓球", value: {name:"tableTennis", text:"乒乓球"}}
]
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option v-for="item in selectOptionArr2" :value="item.value">{{item.text}}</option>
</select>
<br>
<button @click="getSelectValue">获取select设置</button>
</div>
`
option 绑定的数据 selectOptionArr2 中，value 是一个对象。这样 select 的返回值就是对应的对象。
2.10 文本框的 number 修饰符
template : `
<div>
{{message}}
<input v-model.number="message" type="number" />
<button @click="getMessage">获取文本内容</button>
</div>
`
在文本框元素中使用 v-model.number ，得到的结果是一个数字类型的值，而不是字符串。
2.11 文本框的 trim 修饰符
template : `
<div>
{{message}}
<input v-model.trim="message" />
<button @click="getMessage">获取文本内容</button>
</div>
`
在文本框元素中使用 v-model.trim ，得到的结果去去掉两端的空格、Tab、回车等特殊字符。
3. 综述
今天聊了一下 VUE3 的 表单元素，希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
4. 个人公众号
追风人聊Java，欢迎大家关注
VUE3 之 表单元素的更多相关文章
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 表单元素的submit()方法和onsubmit事件
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
随机推荐
- Android Service VS AsyncTask VS Thread
这三种方式的设计目的是不同的. Service: 适用于在后台长期持续运行的动作,如:播放音乐,查看网络数据.注意,在开发文档中,service本身是在UI线程中,所以所需的操作应该创建一个新的线程来 ...
- SpringSecurity自定义注解和处理器
登录功能 添加一个配置类 @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Reso ...
- 小迪安全 Web安全 基础入门 - 第二天 - Web应用&架构搭建&漏洞&HTTP数据包&代理服务器
一.网站搭建 1.域名.是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位.域名可以说是一个IP地址的代称,目的是为了便于记忆后者. 2.子域名.在 ...
- libevent源码学习（8）：event_signal_map解析
目录event_signal_map结构体向event_signal_map中添加event激活event_signal_map中的event删除event_signal_map中的event以下源码 ...
- vc mfc listctrl使用虚拟列表 虚拟列表用法
note 虚拟列表可有效加载大量数据 需要处理listctrl的 LVN_GETDISPINFO 消息 使用虚拟列表 不能 使用 insert的方法插入数据,而是告诉listctrl 当前要显示多少行 ...
- Android NDK开发篇:如何使用JNI中的global reference和local reference
JNI提供了一些实例和数组类型(jobject.jclass.jstring.jarray等)作为不透明的引用供本地代码使用.本地代码永远不会直接操作引用指向的VM内部的数据内容.要进行这些操作,必须 ...
- 【LeetCode】1631. 最小体力消耗路径 Path With Minimum Effort
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 解题思路 并查集 代码 刷题心得 欢迎加入组织 日期 题目地址:https ...
- 【LeetCode】102. Binary Tree Level Order Traversal 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目描述 Given a bi ...
- 【LeetCode】208. Implement Trie (Prefix Tree) 实现 Trie (前缀树)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:Leetcode, 力扣,Trie, 前缀树,字典树,20 ...
- 【LeetCode】373. Find K Pairs with Smallest Sums 解题报告（Python）
[LeetCode]373. Find K Pairs with Smallest Sums 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/p ...