不是别人逼你去优秀，是你自己为自己而奋斗。身体是自己的，健康是自己的，难受也是自己的，所以不要想吃什么就吃什么。
今天用Vue做一个小项目时需要用到多个select筛选功能，但是原生的太丑，如果直接写在当前页多个select处理起来又太繁琐，第三方ui又太大，所以就自己写了一个，并上传了GitHub仓库,仓库地址：https://github.com/tuohuang/vue-select
使用方法：
引入组件:
import VueSelect from '../components/VueSelect'
注册组件
export default {
components: {
VueSelect
}
}
使用组件
<template> <vue-select :options="options" name="name" value="id" placeholder="请选择类型" v-model="selected_id" @change="handleChange"> </vue-select> </template>
- options：选择项列表；
- name：选择项列表中选择项名称的属性名；
- value：选择项列表中选择项的值的属性名；
- v-model：对应双向绑定的选中后的值；
- @change：选择发生改变后触发事件，回调参数：当前选项。
DEMO:
<template>
<div>
<vue-select
:options="options"
name="name"
value="id"
placeholder="请选择一个水果"
v-model="selected_id"
@change="handleChange">
</vue-select>
</div>
</template>
<script>
import VueSelect from '../components/VueSelect'
export default {
name: "Index",
data() {
return {
selected_id: "",
options: [
{name: "苹果", id: 1},
{name: "橘子", id: 2},
{name: "香蕉", id: 3},
{name: "西瓜", id: 4},
]
}
},
components: {
VueSelect
},
methods: {
handleChange(e) {
console.log(e)
}
}
}
</script>
以上就是详解基于Vue的支持数据双向绑定的select组件。前途一片光明，可我找不到出路。感悟：把自己封闭起来，再光明也是虚无。人到老年，放飞自己，才是真正的出路。更多关于详解基于Vue的支持数据双向绑定的select组件请关注haodaima.com其它相关文章！
