基于Vue支持數據雙向綁定的select組件怎么用

這篇文章主要為大家展示了“基于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組件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！