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

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

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

今天用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：對應(yīng)雙向綁定的選中后的值；
  • @change：選擇發(fā)生改變后觸發(fā)事件，回調(diào)參數(shù)：當前選項。

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>

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

相關(guān)文章

最新評論