这篇文章主要为大家展示了“基于Vue支持数据双向绑定的select组件怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于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组件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
