ホームページ > 記事 > ウェブフロントエンド > Vue.js を介して選択ドロップダウンリストを実装する方法、具体的な操作は次のとおりです。

Vue.js を介して選択ドロップダウンリストを実装する方法、具体的な操作は次のとおりです。

亚连オリジナル: 2018-06-01 17:02:582194ブラウズ

ここで、Vue.js を使用して選択ドロップダウンリストを作成する例を共有します (ul-li タグは選択タグを模倣しています)。これは優れた参考値であり、皆さんの役に立つことを願っています。

目標: ul-li タグを Vue.js の知識と組み合わせて使用し、select タグを模倣するドロップダウンオプションリストを作成します。

知識ポイント:

コンポーネントの書き方と使い方

コンポーネント間のデータ転送(propsの使用)

コンポーネント間のデータ転送($emitアプリケーション)

動的データバインディング(v-bind)

カスタマイズされたイベント通信

レンダリング:

1. 操作を実行する前に、ドロップダウンリストは非表示の状態です

2. 入力ボックスをクリックしてドロップダウンリストを表示します

3. リスト項目をクリックすると、入力ボックスの値がそれに応じて変更されます

PS: 2 つのセットのバインドを示すにはdata、data1 と data2 の 2 つのリストが例で作成されました

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のクエリ動的パラメータ受け渡し問題を解決する

vueデータ転送--特別な実装スキルを持っています

mysqlデータベースへのnodejs接続と基礎知識の詳細説明

以上がVue.js を介して選択ドロップダウンリストを実装する方法、具体的な操作は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：iviewの選択ドロップダウンボックスでオプションがずれる問題の解決方法具体的な操作は以下の通りです。次の記事：iviewの選択ドロップダウンボックスでオプションがずれる問題の解決方法具体的な操作は以下の通りです。

続きを見る

Vue.js を介して選択ドロップダウン リストを実装する方法、具体的な操作は次のとおりです。

関連記事

Vue.js を介して選択ドロップダウンリストを実装する方法、具体的な操作は次のとおりです。