快捷導(dǎo)航

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

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

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

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>

添加選項(xiàng)，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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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