vue 不使用select实现下拉框功能(推荐)


Posted in Javascript onMay 17, 2018

html部分:v-for循环出的结构

<div >
  <p @click="clickSize (item, index)">{{item.name}}</p> 
  <transition name="opacityLeave">
   <div class="condition-list" v-show="isShowSize && index == i">
    <div class="size-wrap" v-if="item.RingSize">
     <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
    </div>
   </div>
  </transition>
</div>

js部分:

data() {
 return {
  isShowSize: false,
  i: -1
 };
 },
//实现点击哪个下拉框显示
  clickSize (item, index) {
  this.i = index;
  this.isShowSize = !this.isShowSize;
 },
//实现选取下拉值
 getSize (item, item1) {
  this.item.name = item1.AttrValueName;
  this.isShowSize = !this.isShowSize;
 },

下面看下vue--select组件的使用与禁用

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

微信发送时,页面如下:

vue 不使用select实现下拉框功能(推荐)

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

vue 不使用select实现下拉框功能(推荐)

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

属性 说明 类型 默认值
disabled 是否禁用 Boolean false

实现:

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

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> 
  <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> 
 </Select> 

export default { 
 data(){ 
  return{ 
   isAble: false,//select下拉框是否可用 
  } 
 }

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

methods:{ 
   Test(){ 
   var vm = this; 
    if (vm.alertType == '邮件') { 
    vm.isAble = true; //不可用 
   } 
    
   } 
}

test方法中只写了判断不可用,改回微信时,还要变成可用状态,不然又埋了个bug,哈哈。不过这是业务逻辑了,只介绍方法,记个笔记,具体视情况而定。

以上所述是小编给大家介绍的vue 不使用select实现下拉框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP chr()函数讲解
2019/02/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
opencv实现简单人脸识别
2021/02/19 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
opencv实现图像几何变换
2021/03/24 Python
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2014年工商所工作总结
2014/12/09 职场文书
会计求职信怎么写
2015/03/20 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书