189 8069 5689

Vue.js如何实现select下拉列表

这篇文章主要为大家展示了“Vue.js如何实现select下拉列表”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue.js如何实现select下拉列表”这篇文章吧。

创新互联专业为企业提供城口网站建设、城口做网站、城口网站设计、城口网站制作等企业网站建设、网页设计与制作、城口企业网站模板建站服务，十年城口做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。

知识点：

组件的写法及运用

组件之间的数据传递（props的运用）

组件之间的数据传递（$emit的运用）

动态数据的绑定（v-bind）

自定义事件通信

效果图：

1、未做任何操作前，下拉列表为隐藏状态

Vue.js如何实现select下拉列表

2、点击输入框显示下拉列表

Vue.js如何实现select下拉列表

3、 点击列表项，输入框值跟随改变

Vue.js如何实现select下拉列表

PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表

Vue.js如何实现select下拉列表

html代码：




 
 ul-li模仿select下拉菜单
 
 


 
  
  
 

JavaScript代码


//注册全局组件
//在my-select组件中套用ul-select组件，my-select为父组件ul-select为子组件
Vue.component('my-select', {
 //组件中data要写成函数形式
 data() {
  return {
   ulShow: false, //默认ul不显示，单击input改变ul的显示状态
   selectVal: '' //选项值，input的值与选项值动态绑定
  }
 },
 //父组件向子组件通信用props
 props: ['btnName', 'list'],
 template: `
  
   
    
    
   
        
 `,  methods: {   changeVal(value) {    this.selectVal = value   }  } }) //子组件 Vue.component('my-ul', {  props: ['list'],  template: `       {{item}}     `,  methods: {   selectLi: function(item) {    //$emit触发当前实例上的自定义事件 receive    this.$emit('receive', item);   }  } }) //创建Vue实例 new Vue({  el: '#demo',  //定义两组数据分别传递到两个组件的li中，两个列表的操作互不影响  data: {   data1: ['CSS', 'HTML', 'JavaScript'],   data2: ['Vue.js', 'Node.js', 'Sass'],  } })

CSS样式

ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}
#selectWrap {
 width: 250px;
 padding: 2rem;
 background: #4682b4;
}
.searchBox input, .searchBox a {
 line-height: 1.5rem;
 height: 1.5rem;
 margin-bottom: 1rem;
 padding: 0 5px;
 vertical-align: middle;
 border: 1px solid #aaa;
 border-radius: 5px;
 outline: none;
}
.searchBox a {
 display: inline-block;
 text-decoration: none;
 background-color: #b1d85c;
}
.skill li {
 font-size: 18px;
 line-height: 2rem;
 height: 2rem;
 padding-left: 5px;
 cursor: pointer;
}
.skill li:hover {
 background-color: #008b45;
}

以上是“Vue.js如何实现select下拉列表”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


网站栏目：Vue.js如何实现select下拉列表
本文URL：http://cdxtjz.cn/article/ihsgci.html

其他资讯

联系我们

您好HELLO!
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
  • 电话：028- 86922220 18980695689
  • 商务合作邮箱：631063699@qq.com
  • 合作QQ： 532337155
  • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

小谭观点

相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
友情链接： 成都柴油发电机组维修   公路打桩机   东方电机技改   zyfdjwx.com   腾讯香港免备案空间   成都做网站   西云主机托管   西部信息中心   成都雨棚定制   深圳惠宜防蚊纱窗   
© Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用