vue 实现select下拉框效果

第一步   

首先你要引入jQuery（忘了怎么引入的话，参考一下其他的文档），因为js部分用jq比较方便。

第二步

dt标签是要展示的内容

li标签是下拉的选项

***@click=”www(‘中文‘，‘#’) 点击事件，传入两个值

第三步

.choice9 {

  /* position: absolute;

  top: 11px;

  right: 860px; */

#确定位置，这里可以添加边框，聚焦样式

  width: 90px;

  height: 40px;

  margin: auto;

}

.select {

  position: relative;

  float: left;

  margin: 0 10px;

  border: none;#边框不显示

  z-index: 0;

}

.select dt {

  text-align: center;

  height: 28px;

  color: #777e90;

  font: 14px "Poppins";#设置要展示的字体样式

  font-weight: inherit;

  display: inline-block;

  border: none;

  background: none;

  line-height: 40px;

  font-weight: bold;

  padding-left: 10px;

  cursor: pointer;

  width: 80px;

  padding-right: 12px;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  position: relative;

  z-index: 99;

}

/* .select dt:hover,.select dt.cur{border:1px solid #409DFE;box-shadow:0 0 3px #409DFE;} */#点击的一个聚焦样式

.select dd {

  height: 70px;

  font: 10pt "Poppins";

  position: absolute;

  left: 0;

  top: 29px;

  background: #fcfcfb;

  display: none;#隐藏下拉框

  border: none;

  z-index: 999999999999999;

}

.select dd ul {

  font: 10pt "Poppins";

  padding: 4px;

  width: 80px;

  max-height: 100px;

  overflow: auto;

  border: none;

}

.select dd ul li {

  margin-top: 10px;

  font: 10pt "Poppins";

}

.select dd ul li a {

  /* line-height: 10px; */

  display: block;

  padding: 0 8px;

  font: 10pt "Poppins";

}

.select dd ul li a:hover {

  background: #f5f5f5;

}

.select .xianshi {

  display: block;

}

第四步 js

***vue的函数必须写到methods里，看到$就要看自己有没有引入jq

***如果感觉写的js有问题，可以试着用alert（‘xxx’）来逐步排错

methods: {

    ww:function(a,url){                                        点击选项触发ww

      // alert(a);                                    检查a

      // alert(url);                                                             检查url 是否传入

      $('.choice8 dt').html(''+a+'');  在dt标签下加上a标签

            // $('.select dd').removeClass('xianshi');

      qq();                      然后调用qq（）因为是显示状态触发qq的else 所以会隐藏掉

    },

    qq:function(){

//alert("111")

        var myb=$('.myse dd').css('display');      将myse下的dd中的display属性写入myb

        // alert(myb)                                    打印出来查看，并检查写法是否成功，能否获取到

        if(myb=='none'){                              如果myb=none

          $('.choice8 dd').addClass('xianshi');        在choice8的dd下添加class  xianshi

        }else{                                               如果不等于none

          $('.choice8 dd').removeClass('xianshi');  在choice8的dd下移除class xianshi

        }

    }

实现效果：