vue3 ant-design-vue表单及a-input v-model绑定

最新推荐文章于 2024-03-05 19:18:16 发布
最新推荐文章于 2024-03-05 19:18:16 发布
阅读量2.5k 收藏 2
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whn1231/article/details/121510067
版权

表单内 a-input  v-model绑定后，界面输入了，后台数据却没有变化。

<a-input v-model="formData.a" @change="ShowA"></a-input>

要修改为

<a-input v-model:value="formData.a" @change="ShowA"></a-input>

是因为antD-vue2.x版，form 和 formmodel合并成form了，保留了formmodel的功能。

v-model:value 

whn1231
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中的模板指令——表单输入绑定指令v-model（:value和@input）
传播有益的技术文章，力求精准、专业、专心、专享
06-06 647
v-model指令实现表单输入值与父组件中的属性变量保持同步
基于vue Ant-Design 的表单设计器，快速开发.zip
最新发布
05-04
基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...
vue3使用antd-design-vue关于a-input绑定值不生效
qq_54065476的博客
03-05 303
vue3使用antd-design-vue关于a-input绑定值前缀要加：value
vue3的踩坑记录一(a-input无法绑定值)
qq_44051941的博客
09-22 1646
vue3入门时使用很不方便，以后开始用博客记录踩坑记录。 今日踩坑： 当使用a-input组件时，发现使用v-model无法绑定值，此时应该使用v-model:value 即使出现错误，也要选择暂时无视，我就是因为错误提示一直卡在了这里。 ...
Vue3输入框（Input）
Mr Dear的博客
07-25 7113
通过鼠标或键盘输入内容，是最基础的表单域的包装，好的不得了😁😁
ant design vue 下的a-input 使用v-decorator（保存数据时候 如果 是value里面没有自己要的值）可以自定义一个 paramv3 然后把value值都给paramv3
Java&Develop的博客
11-19 317
## ant design vue 下的a-input 使用v-decorator（保存数据时候 如果 是value里面没有自己要的值）可以自定义一个 paramv2然后把value值都给paramv2。和 用value取不到的值也给 paramv2
vue3 antd项目实战——input输入框限制输入内容和长度，Form表单动态校验规则
热门推荐
XSL_HR的博客
12-27 1万+
vue3 antd项目实战中，限制input输入框的输入内容和输入长度，并为From表单添加动态校验规则，设置输入框输入内容不能为空。
Vue表单输入绑定(元婴中期)
LuckFairyLuckBaby的博客
09-12 480
表单输入绑定 基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 v...
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
@ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone ...
基于vue Ant-Design 的表单设计器.zip
12-26
Vue.js Ant-Design 表单设计器是一个强大的工具，它允许开发者在Vue项目中快速构建复杂的动态表单。这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决...
零基础学习Vue: 第8课 Vue中v-model指令 的input单选框、复选框、下拉框、文本框：
舜岳的博客
04-14 1026
零基础学习Vue: 第8课 Vue中v-model指令 的input单选框、复选框： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn....
vue之表单输入绑定
Little___Turtle的博客
07-01 3492
vue表单输入绑定简单使用说明 易懂版
vue3属性以及新用法
shimeifang11的博客
03-11 5787
之前零零散散的用vue3写一些案例，一直也没有做过任何总结，这段时间忙里偷闲写点东西吧。 vue3新语法统一写在 <script setup lang="ts">，这种组合式API写法，跟vue2完全不一样【vue2采用option api】。 1.ref =》基本数据类型响应 定义的数据需要使用value去获取值 const iptValue = ref('html') const list = ref(['css', 'js']) console.log(iptValue.v..
vue3 antdv input输入 自动获取焦点的实现
qq_44792224的博客
05-25 2355
【代码】vue3 antdv input输入 自动获取焦点的实现。
vue3+ant2 组件form中使用InputNumber
Lucky_girl_wan的博客
09-08 796
初次使用，记录下问题： 使用inputNumber时加校验，点击确定时无论inputNumber中是否有数组都一直提示"为输入内容"，但是当输入字符时就没有提示，
vue -- $emit input 与 v-model（父组件文本框与子组件文本框内容同步更新）
笑望灬星辰
11-29 1612
业务场景 父组件文本框与子组件文本框内容同步更新 直接上代码 父組件 <template> <div style="padding:30px"> <div>我是父组件</div> <a-input v-model="parent" style="width:30%" placeholder="我是父组件"></a-input> <children v-model="parent" :parent="pa
小程序 修改v-model值后调用@input，重新赋值并不会修改视图BUG
Technology_hands的博客
05-31 416
因为你改了this.newName 这个值再去改E（input标签 里面的@input事件）是一个异步事件 在这个异步事件之前已经调用了下一个inputChange，此时赋的值还是之前的值 而使用了$nextTick 可以确保这个方法在所有异步事件之后调用 就可以获取最新的值了。那么，那么导致v-model="newName" 的值确实被我限制在了4个，但是视图并没有发生变化，会越写越多，但是如果我加上了this.$nextTick(() => {那么就正常了，那么为什么会这样呢？
ant-design-vue里没有a-form-model
05-26
在 ant-design-vue 中，表单组件的使用方式和 antd（Ant Design for React）类似，但是有些差异。其中，a-form-model 并不存在于 ant-design-vue 中。相反，ant-design-vue 提供了 a-form 和 a-form-item 两个组件来实现表单的双向绑定。 a-form 组件是最基本的表单组件，用于包裹整个表单，它可以接收一个 model 属性，用于绑定表单数据。a-form-item 组件用于包裹具体的表单项，例如输入框、下拉框、单选框等等。a-form-item 组件也可以接收一个 model 属性，用于绑定表单中该项的数据。 以下是一个简单的 ant-design-vue 表单示例： ``` <template> <a-form :model="form" :rules="rules"> <a-form-item label="用户名" prop="username"> <a-input v-model="form.username" /> </a-form-item> <a-form-item label="密码" prop="password"> <a-input v-model="form.password" type="password" /> </a-form-item> <a-form-item> <a-button type="primary" @click="submitForm">提交</a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过，提交表单数据 console.log(this.form) } else { // 表单验证失败 console.log('error submit!!') return false } }) } } } </script> ``` 在这个示例中，我们使用了 a-form 和 a-form-item 组件来实现表单的双向绑定，并使用了 rules 属性来定义表单验证规则。在提交表单时，我们使用了 $refs.form.validate 方法来验证表单数据是否符合规则。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值