如何使用Link,Radio,Checkbox,Select,Cascader组件

这篇文章主要介绍"如何使用Link,Radio,Checkbox,Select,Cascader组件"，在日常操作中，相信很多人在如何使用Link,Radio,Checkbox,Select,Cascader组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"如何使用Link,Radio,Checkbox,Select,Cascader组件"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1.Link组件动态绑定URL

                                        默认链接                        

对应的js代码

2.Radio 用法

    备选项1    备选项2    备选项3

对应的js代码

当选项被选中时，会调用radioChange方法。

3.Checkbox用法

方式一：

对应的js代码

当标签中的值改变时，会调用handleChange方法。

方式二：

搜索

对应的js代码

当搜索按钮被点击时，会触发getSearch方法，获取到num的值。

4.Select 用法

方式一：

el-option中只需要声明key和value的值即可

    搜索

对应的js代码

可以先声明options为空数组，然后在init方法中为options数组赋值(可以异步请求后端数据，将后端响应数据赋值)

当搜索按钮被点击时，会触发getSearch方法，获取到el-select被选中的值。

方式二：

对应的js代码

当select选项改变时，会调用selectChange方法。

如需要在下拉菜单中选中多个值中，可以在el-select标签中加入multiple选项，多选中标签的结果是一个数组。

7.Cascader 级联菜单组件用法

对应的js代码

可以先声明options为空数组，然后在init方法中为options数组赋值(可以异步请求后端数据，将后端响应数据赋值)

需要选中值就触发方法时，可以加@change="handleChange"选项来绑定触发方法

需指定长度时，可以加选项

其选中结果为一个数组类型，可以直接加索引获取选中的值

到此，关于"如何使用Link,Radio,Checkbox,Select,Cascader组件"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！