cari

Rumah >hujung hadapan web >tutorial js >如何通过Vue.js实现select下拉列表，具体操作如下

如何通过Vue.js实现select下拉列表，具体操作如下

亚连
亚连asal
2018-06-01 17:02:582211semak imbas

下面我就为大家分享一篇Vue.js做select下拉列表的实例(ul-li标签仿select标签)，具有很好的参考价值，希望对大家有所帮助。

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

知识点：

组件的写法及运用

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

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

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

自定义事件通信

效果图：

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

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

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

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

html代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ul-li模仿select下拉菜单</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" />
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <p id="demo">
  <my-select btn-name=&#39;search&#39; v-bind:list=&#39;data1&#39; style=&#39;float: left;margin-right: 2rem;&#39;></my-select>
  <my-select btn-name=&#39;搜索&#39; v-bind:list=&#39;data2&#39; style=&#39;float: left;&#39;></my-select>
 </p>
</body>
</html>

JavaScript代码

<script type="text/javascript">
//注册全局组件
//在my-select组件中套用ul-select组件，my-select为父组件ul-select为子组件
Vue.component(&#39;my-select&#39;, {
 //组件中data要写成函数形式
 data() {
  return {
   ulShow: false, //默认ul不显示，单击input改变ul的显示状态
   selectVal: &#39;&#39; //选项值，input的值与选项值动态绑定
  }
 },
 //父组件向子组件通信用props
 props: [&#39;btnName&#39;, &#39;list&#39;],
 template: `
  <p id="selectWrap">
   <p class="searchBox">
    <input type="text" :value="selectVal" @click=&#39;ulShow = !ulShow&#39;/>
    <a href="#" rel="external nofollow" class="search" v-text=&#39;btnName&#39;></a>
   </p>
    <my-ul v-show=&#39;ulShow&#39; v-bind:list=&#39;list&#39; v-on:receive=&#39;changeVal&#39;></my-ul>
   </p>
 `,
 methods: {
  changeVal(value) {
   this.selectVal = value
  }
 }
})
//子组件
Vue.component(&#39;my-ul&#39;, {
 props: [&#39;list&#39;],
 template: `
  <ul class="skill">
   <li v-for=&#39;item of list&#39; v-on:click=&#39;selectLi(item)&#39;>{{item}}</li>
  </ul>
 `,
 methods: {
  selectLi: function(item) {
   //$emit触发当前实例上的自定义事件 receive
   this.$emit(&#39;receive&#39;, item);
  }
 }
})
//创建Vue实例
new Vue({
 el: &#39;#demo&#39;,
 //定义两组数据分别传递到两个组件的li中，两个列表的操作互不影响
 data: {
  data1: [&#39;CSS&#39;, &#39;HTML&#39;, &#39;JavaScript&#39;],
  data2: [&#39;Vue.js&#39;, &#39;Node.js&#39;, &#39;Sass&#39;],
 }
})
</script>

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-router中的query动态传参问题

vue数据传递--我有特殊的实现技巧

nodejs连接mysql数据库及基本知识点详解

Atas ialah kandungan terperinci 如何通过Vue.js实现select下拉列表，具体操作如下. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何解决iview 的select下拉框选项错位的问题，具体操作如下Artikel seterusnya：怎样使用Vue组件

Artikel berkaitan

Lihat lagi