如何在vue中实现下拉框功能

　　介绍

如何在vue中实现下拉框功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> html部分:v代表循环出的结构

& lt; div 比; 　　& lt;才能p  @click=癱lickSize (项目,,指数)“在{{item.name}} & lt;/p>, 　　& lt;才能transition  name=皁pacityLeave"比; 　　,,& lt; div 类=癱ondition-list", v-show=癷sShowSize ,,, index ==,我在 　　,,,& lt; div 类=皊ize-wrap", v=癷tem.RingSize"比; 　　,,,,& lt; p 类=皊ize",:类=皗& # 39;活跃# 39;:item1.active}“,:关键=癷ndex1", v=?item1, index1),拷贝item.RingSize", @click=癵etSize (项目,,item1),“在{{item1.AttrValueName}} & lt;/p> 　　,,,& lt;/div> 　　,,& lt;/div> 　　& lt;才能/transition> 　　& lt;/div>

<强> js部分:

数据(),{ 　　,return  { 　　,,isShowSize:假的, 　　我才能:1 　　,}; 　　},//实现点击哪个下拉框显示 　　clickSize 才能;(项目,,指数),{ 　　时间=this.i 才能;指数; 　　this.isShowSize 才能=,! this.isShowSize; 　　},//实现选取下拉值 　　,getSize (项目,,item1), { 　　时间=this.item.name 才能;item1.AttrValueName; 　　this.isShowSize 才能=,! this.isShowSize; 　　},

<强>下面看下vue -选择组件的使用与禁用

业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件发送时不需要

微信发送时,页面如下:

如何在vue中实现下拉框功能

邮件发送时,选择器不可用,页面如下:

如何在vue中实现下拉框功能

虽然官网上没有给出具体的例子,但可从属性中查到“禁用”属性,

属性说明类型默认值残疾是否禁用Booleanfalse

实现:

,添加禁用属性,写成如下红色标记格式;定义一个isAble变量,用来存放TRUE和FALSE值,决定此选择框是否可用。

& lt; Select  & lt; span 祝辞v-bind:禁用=癷sAble", & lt;/span> clearable  v模型=癲ataAgentEntity.ID",在, 　　& lt;才能Option  v=癷tem  dataAgent",拷贝:value=https://www.yisu.com/zixun/癷tem.ID”:关键="项目。ID”> {{item.name}} 　　 　　 　　出口默认{ 　　数据(){ 　　返回{ 　　isAble:假的,//选择下拉框是否可用 　　} 　　}

然后就是逻辑中操作变量isAble的值,改变组件的可用禁用状态了

,方法:{, 　　测试(){,,, 　　,,var  vm =,,, 　　,,,if  (vm.alertType ==, & # 39;邮件& # 39;),{, 　　,,,vm.isAble =,真的,,//不可用, 　　,,}, 　　,,,, 　　,,}, 　　} 为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。

如何在vue中实现下拉框功能