vue.js - vue 下拉列表问题 用li写的

问题描述

问 题

 <div class="tend-select" name="nice-select" v-on:click="showClick">
    <span value="fourWord" class="classify" v-model="selected">现金购买</span>
         <ul style="display: none;" v-show="show" >
            <li v-for="option in options" >{{option.text}}</li>
        </ul>
 </div>  
 
 

li中点击哪一个，显示并隐藏下拉

解决方案

看起來原本是直接設置 isCur 來代表選中，但這樣每次要得知哪個是選中的，就要遍歷一遍 options 不太有效率，所以另外設置一個變量代表選中。

<div id="app">
    <div class="tend-select" name="nice-select" v-on:click="showClick">
        <span value="fourWord" class="classify" v-text="options[selected].text"></span>
        <ul style="display: none;" v-show="show" >
            <li @click="select(optionIndex)" v-for="(option, optionIndex) in options" >{{option.text}}</li>
        </ul>
    </div>  
</div>

new Vue({
    el: '#app',
    data() {
      return {
        show: false,
        options: [
          { text: '現金購買' },
          { text: '抵押購買' }
        ],
        selected: 0, // 代表選中的索引
      }
    },
    methods: {
      showClick() {
        this.show = !this.show
      },
      select(index) {
        this.selected = index
      }
    }
})

實際運行：jsFiddle

这篇关于vue.js - vue 下拉列表问题 用li写的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！