Ant Design of Vue (2)使用a |
您所在的位置:网站首页 › VUE单选框选中获取选中的整条数据 › Ant Design of Vue (2)使用a |
一.其实官方文档写的挺详细了。这个拿来记录一下。 例如,当我们前端想获取选择框上面文字时,要怎么处理 ,根据官网,使用watch: 页面中使用 实际测试一下, 这个是我的Vue前端页面 我选中的 看一下控制台, key的话,是我动态绑定的主键。 这里根据官网来写就好了,这里面注意一下,watch不是写在methods里面的。重新另起一个方法就好了。 二,还有第二种方式,也是官方提供的。这个需要写在methods里面了。 1.例如:官网的例子, 2. 控制台得到一个对象。 三.拿个实际例子来讲吧。 例如:vue前端页面 然后在 methods 里面添加以下方法看看控制台,是不是一个对象 对吧,一般对象的话,直接使用value.label,这样值不就出来了吗? 如果这样点的话,得到的是一个undefinde ,没有找到。 由于本人理解比较肤浅,没有去深入了解是为什么。知道的可以留言,互相学习。 各种坑,各种百度都找了,后来发现,快到山穷水尽的时候,灵光一现,试试vue提供的循环 果然,还真获取对象的值了。 页面数据 打开控制台 这样就获取到实际的值了。 最开头的例子,也一样的道理,直接使用循环即可取出数据 页面 控制如输出 前端代码: 四.最后,再教一个小技巧,要学会看官网的文档,使用API 1、比如,我想实现一个功能,当两个选项都没有选的时候,提交按钮是禁用的状态,那这个事件就要触发一个事件,一个选择框值发生变化时的事件。 2、首先第一步是查看官网的API 选择器 Select - Ant Design Vue (antdv.com) 3、使用一个例子来实现 步骤一,定义两个接收的选中框内容的属性 步骤二,给属性分别赋值, 步骤三,我先看控制台是否可以正常赋值 前端页面选择 查看控制台,能正常有值,说明赋值是成功了。 步骤四,根据官网API,我们需要定义一个change 事件 步骤五,实现事件里面的方法,这个方法写在methods 里面 步骤六,在提交按钮里面添加一个属性判断,disabled 这样就可以了。页面刚开始加载的时候,那两个属性的值是空的,所以是禁用的状态。 选择了值后,就恢复状态。一旦选择框的值清空,就把这两个属性赋一个空值 ,这样就又变成了 禁用的状态了,功能就实现了 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |