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
- ASPxGridView的資料繫結顯示View
- 微信小程式資料資料繫結顯示NaN微信小程式NaN
- 〈%# 〉與〈%= 〉的區別,顯示資料與繫結資料
- 【資料結構】-時間複雜度和空間複雜度資料結構時間複雜度
- Vue的資料繫結Vue
- 複雜的資料結構設計求解?資料結構
- Vue select 繫結動態變數Vue變數
- vue中select繫結多個值Vue
- Vue資料繫結簡析Vue
- vue資料繫結原始碼Vue原始碼
- Windows 應用程式 DataGrid資料繫結顯示中文列名Windows
- win10如何設定資料夾預設大圖示顯示_win10系統設定資料夾預設以大圖示顯示教程Win10
- Vue資料雙向繫結原理Vue
- vue雙向資料繫結原理Vue
- Vue.js資料繫結原理Vue.js
- DataGridView的資料繫結 與 指定列顯示 (程式碼完成)View
- .Net Core Razor引擎 Form複雜模型繫結ORM模型
- 第二講、Vue3.x繫結資料、繫結html、繫結屬性、迴圈資料VueHTML
- SAP UI5 初學者教程之十九 - SAP UI5 資料型別和複雜的資料繫結UI資料型別
- 資料結構-基本概念和時空複雜度資料結構複雜度
- 資料複雜性和簡單
- 前端資料結構---複雜度分析前端資料結構複雜度
- 資料結構~時間複雜度資料結構時間複雜度
- 資料結構:時間複雜度資料結構時間複雜度
- 淺入深出Vue:資料繫結Vue
- Vue 雙向資料繫結原理分析Vue
- vue.js雙向資料繫結Vue.js
- Vue 動態資料繫結核心方法Vue
- 在select中,載入時預設select為空白,選項內不顯示空白項
- TOAD和PLSQL 預設日期顯示、rowid顯示、TNSNAME的修改SQL
- Laravel 路由的隱式繫結和顯式繫結Laravel路由
- 資料顯示設定攻略
- 淺析vue的雙向資料繫結Vue
- 小程式與Vue對比·資料繫結Vue
- vue中的雙向資料繫結原理Vue
- Vue props 雙向資料繫結方法Vue