La balise ul-li de Vue.jS imite la balise select-Tutoriel H5-php.cn

La balise ul-li de Vue.jS imite la balise select

php中世界最好的语言

Libérer： 2018-03-27 17:35:35

original

4387 Les gens l'ont consulté

Cette fois je vais vous apporter la balise ul-li de Vue.jS pour imiter la balise select. Quelles sont les précautions à prendre pour utiliser la balise ul-li de Vue.jS pour imiter la balise select. Voici un cas pratique ? , jetons un coup d'oeil.

Objectif : utiliser la balise ul-li combinée aux connaissances de Vue.js pour créer une liste d'options déroulante qui imite la balise select.

Points de connaissances :

Comment écrire et utiliser des composants

Transfert de données entre composants (utilisation d'accessoires)

Transfert de données entre composants (utilisation de $emit)

Liaison de données dynamique (v-bind)

Communication d'événement personnalisée

Rendu :

1. Avant toute opération, la liste déroulante est masquée

2. sur la zone de saisie pour afficher la liste déroulante

3. Cliquez sur l'élément de la liste, la valeur de la zone de saisie change en conséquence

PS : Afin de démontrer la liaison de deux ensembles de données data1 et data2, deux listes sont créées dans l'exemple

html code :

<!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>

Copier après la connexion

Code JavaScript

<script type="text/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: `
  <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('my-ul', {
 props: ['list'],
 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('receive', item);
  }
 }
})
//创建Vue实例
new Vue({
 el: '#demo',
 //定义两组数据分别传递到两个组件的li中，两个列表的操作互不影响
 data: {
  data1: ['CSS', 'HTML', 'JavaScript'],
  data2: ['Vue.js', 'Node.js', 'Sass'],
 }
})
</script>

Copier après la connexion

Style 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;
}

Copier après la connexion

Je crois vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Chargeur de modules utilisant javascript

Comment v-for charge les images statiques locales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!