Vue.js如何实现select下拉列表-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

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下拉列表
文章链接：http://www.jxjierui.cn/article/ihsgci.html

新闻中心

其他资讯