欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件

 更新時(shí)間：2019年09月02日 10:12:36   作者：tuohuang  
這篇文章主要介紹了詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今天用Vue做一個(gè)小項(xiàng)目時(shí)需要用到多個(gè)select篩選功能，但是原生的太丑，如果直接寫(xiě)在當(dāng)前頁(yè)多個(gè)select處理起來(lái)又太繁瑣，第三方ui又太大，所以就自己寫(xiě)了一個(gè)，并上傳了GitHub倉(cāng)庫(kù),倉(cāng)庫(kù)地址：https://github.com/tuohuang/vue-select

使用方法：

引入組件:

import VueSelect from '../components/VueSelect'

注冊(cè)組件

export default {
  components: {
    VueSelect
  }
}

使用組件

<template>
  <vue-select
   :options="options"
   name="name"
   value="id"
   placeholder="請(qǐng)選擇類(lèi)型"
   v-model="selected_id"
   @change="handleChange">
  </vue-select>
</template>
  • options：選擇項(xiàng)列表；
  • name：選擇項(xiàng)列表中選擇項(xiàng)名稱的屬性名；
  • value：選擇項(xiàng)列表中選擇項(xiàng)的值的屬性名；
  • v-model：對(duì)應(yīng)雙向綁定的選中后的值；
  • @change：選擇發(fā)生改變后觸發(fā)事件，回調(diào)參數(shù)：當(dāng)前選項(xiàng)。

DEMO:

<template>
  <div>
     <vue-select
    :options="options"
    name="name"
    value="id"
    placeholder="請(qǐng)選擇一個(gè)水果"
    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: "蘋(píng)果", id: 1},
        {name: "橘子", id: 2},
        {name: "香蕉", id: 3},
        {name: "西瓜", id: 4},
      ]
    }
  },
  components: {
    VueSelect
  },
  methods: {
    handleChange(e) {
      console.log(e)
    }
  }
}
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論