Vue.js做select下拉列表的实例(ul-li标签仿select标签)

下面是详细讲解“Vue.js做select下拉列表的实例(ul-li标签仿select标签)”的完整攻略。

思路

在使用Vue.js做select下拉列表的时候，我们的思路是实现一个ul-li标签的下拉列表，通过Vue.js的指令动态地生成并管理列表，实现与原生select标签同样的效果。

实现步骤

1. 确定数据模型

在Vue.js中，我们需要为ul-li下拉列表确定一个数据模型。在这个数据模型中，我们需要包含以下信息：

下拉列表的选项列表；
当前选中的选项。

data: {
  selectList: [
    {value: '1', label: '选项1'},
    {value: '2', label: '选项2'},
    {value: '3', label: '选项3'},
    {value: '4', label: '选项4'},
  ],
  selectedValue: '1'
}

2. 渲染下拉列表

接下来，我们需要在页面中渲染这个下拉列表。我们可以通过v-for指令来循环渲染每个选项，并通过v-bind指令进行数据绑定。

<div class="select-container">
  <div class="select-header" v-on:click="showList = !showList">{{selectedLabel}}</div>
  <ul class="select-list" v-if="showList">
    <li v-for="(item,index) in selectList" v-on:click="setSelected(item.value)">
      {{item.label}}
    </li>
  </ul>
</div>

3. 实现选择下拉列表的功能

为了使得下拉列表具有选择选项的功能，我们需要在Vue.js中实现以下两个功能：

显示选中的选项；
点击选项后更新选中的选项。

computed: {
  selectedLabel: function() {
    return this.selectList.filter(item => item.value === this.selectedValue)[0].label
  }
},
methods: {
  setSelected: function(val) {
    this.selectedValue = val
    this.showList = false
  }
}

4. 添加样式

最后，我们需要为下拉列表添加一些CSS样式。

.select-container {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 32px;
}

.select-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.select-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 128px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.select-list li {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 20px;
  line-height: 32px;
  cursor: pointer;
  color: #333;
}

.select-list li:hover {
  background-color: #f0f0f0;
}

示例

下面是两个Vue.js做select下拉列表的实例，其中一个使用了静态数据，另一个使用了动态数据。

示例1: 静态数据

<div id="app">
  <div class="select-container">
    <div class="select-header" v-on:click="showList = !showList">{{selectedLabel}}</div>
    <ul class="select-list" v-if="showList">
      <li v-for="(item,index) in selectList" v-on:click="setSelected(item.value)">
        {{item.label}}
      </li>
    </ul>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selectList: [
      {value: '1', label: '选项1'},
      {value: '2', label: '选项2'},
      {value: '3', label: '选项3'},
      {value: '4', label: '选项4'},
    ],
    selectedValue: '1',
    showList: false
  },
  computed: {
    selectedLabel: function() {
      return this.selectList.filter(item => item.value === this.selectedValue)[0].label
    }
  },
  methods: {
    setSelected: function(val) {
      this.selectedValue = val
      this.showList = false
    }
  }
})
</script>

<style>
.select-container {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 32px;
}

.select-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.select-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 128px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.select-list li {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 20px;
  line-height: 32px;
  cursor: pointer;
  color: #333;
}

.select-list li:hover {
  background-color: #f0f0f0;
}
</style>

示例2: 动态数据

<div id="app">
  <div class="select-container">
    <div class="select-header" v-on:click="showList = !showList">{{selectedLabel}}</div>
    <ul class="select-list" v-if="showList">
      <li v-for="(item,index) in selectList" v-on:click="setSelected(item.value)">
        {{item.label}}
      </li>
    </ul>
  </div>
  <button v-on:click="addOption">添加选项</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selectList: [
      {value: '1', label: '选项1'},
      {value: '2', label: '选项2'},
      {value: '3', label: '选项3'},
      {value: '4', label: '选项4'},
    ],
    selectedValue: '1',
    showList: false
  },
  computed: {
    selectedLabel: function() {
      return this.selectList.filter(item => item.value === this.selectedValue)[0].label
    }
  },
  methods: {
    setSelected: function(val) {
      this.selectedValue = val
      this.showList = false
    },
    addOption: function() {
      this.selectList.push({
        value: '5',
        label: '选项5'
      })
    }
  }
})
</script>

<style>
.select-container {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 32px;
}

.select-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.select-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 128px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.select-list li {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 20px;
  line-height: 32px;
  cursor: pointer;
  color: #333;
}

.select-list li:hover {
  background-color: #f0f0f0;
}
</style>

以上就是使用Vue.js做select下拉列表的实例(ul-li标签仿select标签)的完整攻略，希望可以对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue.js做select下拉列表的实例(ul-li标签仿select标签) - Python技术站