100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant Design of Vue (2)使用a-select 获取选择框数据

Ant Design of Vue (2)使用a-select 获取选择框数据

时间:2019-06-27 15:59:06

相关推荐

Ant Design of Vue (2)使用a-select 获取选择框数据

一.其实官方文档写的挺详细了。这个拿来记录一下。

例如,当我们前端想获取选择框上面文字时,要怎么处理

,根据官网,使用watch:

页面中使用

实际测试一下,

这个是我的Vue前端页面

我选中的

看一下控制台,

key的话,是我动态绑定的主键。

这里根据官网来写就好了,这里面注意一下,watch不是写在methods里面的。重新另起一个方法就好了。

二,还有第二种方式,也是官方提供的。这个需要写在methods里面了。

1.例如:官网的例子,

2. 控制台得到一个对象。

三.拿个实际例子来讲吧。

例如:vue前端页面

然后在methods 里面添加以下方法

看看控制台,是不是一个对象

对吧,一般对象的话,直接使用value.label,这样值不就出来了吗?

如果这样点的话,得到的是一个undefinde ,没有找到。

由于本人理解比较肤浅,没有去深入了解是为什么。知道的可以留言,互相学习。

各种坑,各种百度都找了,后来发现,快到山穷水尽的时候,灵光一现,试试vue提供的循环

果然,还真获取对象的值了。

页面数据

打开控制台

这样就获取到实际的值了。

最开头的例子,也一样的道理,直接使用循环即可取出数据

页面

控制如输出

前端代码:

四.最后,再教一个小技巧,要学会看官网的文档,使用API

1、比如,我想实现一个功能,当两个选项都没有选的时候,提交按钮是禁用的状态,那这个事件就要触发一个事件,一个选择框值发生变化时的事件。

2、首先第一步是查看官网的API

选择器 Select - Ant Design Vue ()

3、使用一个例子来实现

步骤一,定义两个接收的选中框内容的属性

步骤二,给属性分别赋值,

步骤三,我先看控制台是否可以正常赋值

前端页面选择

查看控制台,能正常有值,说明赋值是成功了。

步骤四,根据官网API,我们需要定义一个change事件

步骤五,实现事件里面的方法,这个方法写在methods里面

步骤六,在提交按钮里面添加一个属性判断,disabled

这样就可以了。页面刚开始加载的时候,那两个属性的值是空的,所以是禁用的状态。

选择了值后,就恢复状态。一旦选择框的值清空,就把这两个属性赋一个空值 ,这样就又变成了

禁用的状态了,功能就实现了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。