vue 根據(jù)選擇條件顯示指定參數(shù)的例子

更新時間：2019年11月09日 09:58:31 作者：LuckyMon

今天小編就為大家分享一篇vue 根據(jù)選擇條件顯示指定參數(shù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

html部分

<el-select style="width: 200px;margin-left:5px;" v-model="queryType" slot="prepend" class="filter-item" @change="changepara">
     <el-option v-for="(item,index) in chooseList"
           :key="index"
           :value="item.value"
           :label="item.label"></el-option>
</el-select>

添加選項，chooseList：[{value:‘1',label:‘1'},{value:‘2',label:‘2'}]可替代為

<el-select style="width: 120px" v-model="queryType" slot="prepend" class="filter-item" @change="changepara">
    <el-option value="1" label="1"></el-option>
    <el-option value="2" label="2"></el-option>
   </el-select>

提供的選擇條件比較少的話，可以使用此種方式，看起來比較簡潔。

<div class="get_parameter">
 <ul>
  <li v-for="(item,index) in para" :key="index" :value="item" style="width: 200px;float: left;">
   {{item}}
   <div v-show="ifshow[index]">
    <el-input v-model="paramodel[index]" style="width: 180px;"></el-input>
   </div>
   <div v-show="ifshow1[index]" style="width: 200px;">
    <template>
     <el-radio v-model="paramodel[index]" label="0">0</el-radio>
     <el-radio v-model="paramodel[index]" label="1">1</el-radio>
    </template>
   </div>
  </li>
 </ul>
</div>

根據(jù)所選條件，顯示參數(shù)類型，上面的例子是string及bool類型。

以上這篇vue 根據(jù)選擇條件顯示指定參數(shù)的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue實現(xiàn)點擊圖片放大效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)點擊圖片放大效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue Vine實現(xiàn)一個文件中寫多個組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點是可以在一個文件里面寫多個vue組件,Vue Vine是一個vite插件,vite解析每個模塊時都會觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實現(xiàn)一個文件中寫多個組件,感興趣的朋友一起看看吧
2024-07-07
解決node-sass安裝報錯無python等情況
在國內(nèi)安裝node-sass常因無法穩(wěn)定連接GitHub而失敗,解決方法包括手動下載對應的binding.node文件并放入緩存目錄,操作步驟詳細,適合非Python用戶,無需額外環(huán)境配置
2024-10-10
Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法
這篇文章主要介紹了Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
使用vue-cli webpack 快速搭建項目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項目的教程詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
使用Vue進行數(shù)據(jù)可視化實踐分享
在當今的數(shù)據(jù)驅(qū)動時代,數(shù)據(jù)可視化變得越來越重要,它能夠幫助我們更直觀地理解數(shù)據(jù),從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見的圖表庫（如 Chart.js）來制作漂亮的數(shù)據(jù)可視化效果,需要的朋友可以參考下
2024-10-10
vue對插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
解決Vue的組件屬性this不存在問題
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-01-01
Vue3中事件總線mitt的使用方式
mitt又稱事務總線,是第三方插件,這篇文章主要為大家詳細介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學習一下
2025-03-03
Vue項目之ES6裝飾器在項目實戰(zhàn)中的應用
作為一個曾經(jīng)的Java?coder,當?shù)谝淮慰吹絡s里面的裝飾器Decorator,就馬上想到了Java中的注解,當然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關于Vue項目之ES6裝飾器在項目實戰(zhàn)中應用的相關資料,需要的朋友可以參考下
2022-06-06