vue select 繫結複雜資料和預設顯示
<template> <div> <v-btn class="error" @click="btn">測試</v-btn> <v-select id="list" v-model="sortBy" :items="itemSortBy" placeholder="Sort By" solo hide-details dense class="rounded-lg" color="primary" item-text="text" item-value="values" > <template #item="{ item }"> <p class="selection-item ma-0"> <v-icon small class="mr-3"> {{ item.icon }} </v-icon> <span> {{ item.text }} </span> </p> </template> </v-select> </div> </template> <script> export default { data() { return { search: "", sortBy: '361', itemSortBy: [ { text: "張飛", values: '360', }, { text: "趙雲", values: '361', }, ], items: [], loading: false, options: { page: 1, }, tab: "all", totalItem: 10, totalPage: 1, rowsPerPageItems: [10, 20, 50, 100], doubleClickPrevent: false, }; }, methods:{ btn(){ console.log(this.sortBy); } } }; </script> <style></style>
更多建站及原始碼交易資訊請見 GoodMai
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70008684/viewspace-2839516/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- vue中select繫結多個值及資料回顯Vue
- 微信小程式資料資料繫結顯示NaN微信小程式NaN
- Vue select 繫結動態變數Vue變數
- vue中select繫結多個值Vue
- 複雜的資料結構設計求解?資料結構
- Vue資料繫結簡析Vue
- vue資料繫結原始碼Vue原始碼
- win10如何設定資料夾預設大圖示顯示_win10系統設定資料夾預設以大圖示顯示教程Win10
- vue雙向資料繫結原理Vue
- Vue資料雙向繫結原理Vue
- 第二講、Vue3.x繫結資料、繫結html、繫結屬性、迴圈資料VueHTML
- .Net Core Razor引擎 Form複雜模型繫結ORM模型
- SAP UI5 初學者教程之十九 - SAP UI5 資料型別和複雜的資料繫結UI資料型別
- 資料結構-基本概念和時空複雜度資料結構複雜度
- vue中select的使用以及select設定預設選中Vue
- 資料複雜性和簡單
- 淺入深出Vue:資料繫結Vue
- 資料結構:時間複雜度資料結構時間複雜度
- 前端資料結構---複雜度分析前端資料結構複雜度
- jquery 透過顯示值 設定 select boxjQuery
- 淺析vue的雙向資料繫結Vue
- 小程式與Vue對比·資料繫結Vue
- vue中的雙向資料繫結原理Vue
- 資料顯示設定攻略
- 資料繫結
- Vue原始碼探究-資料繫結的實現Vue原始碼
- js 實現vue的雙向資料繫結JSVue
- vue資料雙向繫結的實現原理Vue
- 五分鐘看懂Vue3-資料繫結Vue
- 前端框架VUE——資料繫結及模板語法前端框架Vue
- Vue echarts 繫結事件重複執行問題VueEcharts事件
- class 和 style 資料動態繫結
- 資料庫下表和列名顯示資料庫
- 模板語法之--強制資料繫結和繫結事件監聽事件
- 從Vue.js原始碼角度再看資料繫結Vue.js原始碼
- Vue 中雙向繫結 Vs 單向資料流Vue
- 基於vue實現的雙向資料繫結Vue
- Vue原始碼探究-資料繫結邏輯架構Vue原始碼架構