vue3 基础-表单元素双向绑定
通常是在 form 表单相关的场景中会用到双向绑定相关, 核心是 v-model 的应用.
input 输入框
<!DOCTYPE html>
<html lang="en">
<head>
<title>input</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, youge'
}
},
template: `
<div>
{{message}}
<input v-model="message" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里双向绑定指的是, message 和 input 框的输入内容和数据是"互相绑定和同步的" 任何一个发生改变, 则另一个同样改变, 核心就是 v-model 的功效. 对于 input 来说, 这里就不用写 value 相关的了.
<div>
{{message}}
<input v-model="message" />
</div>
textarea 多行输入框
多行输入标签和 input 是一样的写法. 同原生不同在于, 就一个单标签的方式即可完成编写.
template: `
<div>
{{message}}
<textarea v-model="message" />
</div>
`
radio 单选框
单选框, 只能选中一个选项, 因此用字符串来存储数据是非常合适的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>radio</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: ""
}
},
template: `
<div>
{{message}}
youge <input type="radio" v-model="message" value="youge" />
youni <input type="radio" v-model="message" value="youni" />
myson <input type="radio" v-model="message" value="myson" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
checkbox 多选框
复选框就稍微复杂一点, 需要 value 来做标记, 同时数据的存储可以通过数组.
<!DOCTYPE html>
<html lang="en">
<head>
<title>chexbox</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: []
}
},
template: `
<div>
{{message}}
youge <input type="checkbox" v-model="message" value="youge" />
youni <input type="checkbox" v-model="message" value="youni" />
myson <input type="checkbox" v-model="message" value="myson" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
// 就勾选了 1, 3 然后数组显示了 1, 3
[ "myson", "youge" ] youge youni myson
因此 单选框 radio 和 多选框 checkbox 的共性都是需要 value 属性来绑定数据, 差异在于数据的存储上, radio 用字符串存储, checkbox 用数组存储即可.
checkbox 自定义属性值
即我们想实现, 即刷新页面是, 选项默认是 "未选中", 当勾选选项时, 则显示 "已选中"
<!DOCTYPE html>
<html lang="en">
<head>
<title>checkbox 自定义属性值</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: "未选中"
}
},
template: `
<div>
{{message}}
<input
type="checkbox"
v-model="message"
true-value="已选中"
false-value="未选中"
/>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
核心的控制在于默认 message: "未选中" 且 false-value: "未选中". 这样就双向绑定啦.
select 下拉框
下拉框其实也就分单选和多选, 用法和上面的标签是一致的, 先来看单选的情况.
<!DOCTYPE html>
<html lang="en">
<head>
<title>select 单选下拉框</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: ""
}
},
template: `
<div>
{{message}}
<select v-model="message">
<option value="" disabled>请选择内容</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
多选其实即在 select 中加上 multiple 关键字即可. 在实际的应用中, 我们会将这些 value 相关的都将其定义或者存储在 data 中, 这样以数据接口的方式来进行动态生成.
<!DOCTYPE html>
<html lang="en">
<head>
<title>select 多选下拉框</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: "",
options: [
{ text: 'A', value: { value: 'A'}},
{ text: 'B', value: { value: 'B'}},
{ text: 'C', value: { value: 'C'}},
{ text: 'D', value: { value: 'D'}},
{ text: 'E', value: { value: 'E'}},
]
}
},
template: `
<div>
{{message}}
<select v-model="message" multiple>
<option
v-for="(item, index) in options"
:key=index
:value=item.value
>
{{item.text}}
</option>
</select>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
/数据展示是 B, C, D 但数据存储则是如下这种更友好的 json 就很 nice .
[ { "value": "B" }, { "value": "C" }, { "value": "D" } ]
v-model 修饰符
这里以 input 标签为例, 主要演示 lazy, number, trim 等常用的即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>表单元素修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { message: "hello"}
},
template: `
<div>
{{message}}
<input v-model.lazy="message" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里 v-model.lazy = "message" 的意思是, 要等用户在输出框填完内容后, 移除焦点, 数据才会变化. 这个能有一定的性能优化, 同时用户体验也是蛮好的.
另外常用的也就挑两个一并小结一波吧, 仍然以 input 输入框为例:
- v-model.lazy: 等用户填完并失去焦点后, 数据才发生变化
- v-model.number: 当感知到输入的是 number 时, 会自动将值转为 number 存储
- v-model.trim: 会自动将用户输入的首尾空格去掉 (主要是用户就喜欢乱加空格), 中间不能哈
vue3 基础-表单元素双向绑定的更多相关文章
- Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- VUE3 之 表单元素
1. 概述 老话说的好:行动起来,原地观望是没有用的. 言归正传,今天我们来聊聊 VUE3 的 表单元素. 2. 表单元素 2.1 文本框与数据绑定 <body> <div id=& ...
- JS基础-表单元素-新表单元素-js概述
1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...
- 4-form表单的双向绑定
概念:表单中的input框等其他标签,值变化时会触发函数,改变state中的值,反过来修改state中的值也会改变input框中值的展现 实现:利用类组件里的state属性来实现(setState会再 ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue基础——表单输入绑定
一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...
- vue基础---表单输入绑定
[一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。
Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...
随机推荐
- QT5笔记：7. 自定义类、自定义信号及类的元对象信息
自定义的QPerson类,需要继承 QObject类 qperson.h头文件 #ifndef QPERSON_H #define QPERSON_H #include <QObject> ...
- MySQL - [02] 常用SQL
题记部分 一.连接MySQL服务器 1.常规连接方式 # 连接本地mysql服务器 mysql -u 用户名 -p # 连接到指定mysql服务器,回车执行该命令之后需要输入密码 mysql -h 主 ...
- DW - 数据仓库原理
2023年5月31日 01:13:14,刷B站的时候,刷到了李鹏程大佬的B站作品. 数据仓库的诞生原因 数据仓库的基本概述 数据仓库的特点 数据仓库 vs 数据库 MPP架构 vs 分布式架构 数据仓 ...
- 大数据之路Week10_day05 (Redis总结I）
正文 1.为什么使用redis 分析:博主觉得在项目中使用redis,主要是从两个角度去考虑:性能和并发.当然,redis还具备可以做分布式锁等其他功能,但是如果只是为了分布式锁这些其他功能,完全还有 ...
- C# 网页截图全攻略：三种技术与 Chrome 路径查找指南
全局配置 string url = "https://blog.csdn.net/sunshineGGB/article/details/122316754"; 一.Puppete ...
- Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
一:背景 1. 讲故事 前面跟大家分享过一篇 C# 调用 C代码引发非托管内存泄露 的文章,这是一个故意引发的正向泄露,这一篇我们从逆向的角度去洞察引发泄露的祸根代码,这东西如果在 windows 上 ...
- 如何基于大语言模型和MaxKB实现PPT自动生成方案
一.实现方案 利用讯飞大模型智能 PPT 生成接口实现,具体参见:讯飞开放平台智能PPT生成 https://www.xfyun.cn/services/aippt#anchor4503211 二.新 ...
- 用DeepSeek+可灵AI+剪映制作哪吒2走T台秀AI视频 (保姆级教程)
内容首发周老师的付费社群,挑其中部分内容免费同步给公号读者 今天给大家分享如何利用DeepSeek这类AI工具,制作哪吒2走T台秀视频,保姆级的制作方法,简单易懂,小白也能轻松上手. 关键操作,分为四 ...
- rust学习笔记(5)
函数 定义为 fn is_divisible_by(lhs: u32, rhs: u32) -> bool { 使用 -> 指向返回的类型 函数定义的位置没有限制 method 针对结构体 ...
- css设置backgroud：url(),无效
react项目中,使用styled-components编写样式,给元素添加背景图不生效. background直接设置十六进制颜色或者颜色的英文名称都是可行的,但是使用url无作用,那就是url问题 ...