小編給大家分享一下怎么使用vue實現select下拉顯示隱藏功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯建站專注于利川企業(yè)網站建設,響應式網站建設,商城網站開發(fā)。利川網站建設公司,為利川等地區(qū)提供建站服務。全流程按需網站設計,專業(yè)設計,全程項目跟蹤,創(chuàng)新互聯建站專業(yè)和態(tài)度為您提供的服務描述:當下拉選擇不同的屬性選項,需展示對應的內容界面;
select下拉菜單如下:
當下拉選擇【表結構變更】、即展示如下界面:
當下拉選擇【接口變更】、即展示如下界面:
代碼實現 vue.js:
//定義一個select下拉菜單 <el-form-item label="類型"> <el-select v-model="form.typeChanges"> <el-option label="表結構變更" value="tableChange"></el-option> <el-option label="接口變更" value="interfaceChange"></el-option> <el-option label="軟件升級" value="softChange"></el-option> <el-option label="其他" value="otherChange"></el-option> </el-select> </el-form-item> //通過結合vue-for循環(huán)以及vue-id判斷條件 //判斷條件一:當下拉選中【表結構變更】,即顯示以下界面 <div v-for="item in items" v-if="form.typeChanges=='tableChange'" > <div prop="items"> <el-form-item label="表名:" > <el-input v-model="form.tableName" class="col-sm-8"></el-input> </el-form-item> <el-form-item label="建表SQL:"> <el-input type="textarea" v-model="form.createSql" class="col-sm-8"></el-input> </el-form-item> </div> </div> //判斷條件二:當下拉選中【接口變更】,即顯示以下界面 <div v-for="item in items" v-if="form.typeChanges=='interfaceChange'"> <div prop="items"> <el-form-item label="接口名:"> <el-input v-model="form.interfaceName" class="col-sm-8"></el-input> </el-form-item> </div> </div>
代碼演示截圖:
當下拉選中【表結構變更】:
當下拉選中【接口變更】:
----------------------------------【功能拓展】---------------------------------------
當面臨下拉有百上千個選項的時候,為了提高代碼的可讀性以及提交代碼的運行效率??梢詫elect下拉自定義一個數組存儲;
<el-form-item label="類型:"> <el-select class="col-sm-3" v-model="change.types"> <el-option v-for="option in typeOption" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> <el-select class="col-sm-6" v-model="change.typeChanges" @change="chooseChild"> <el-option v-for="option in childtypeOption" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> </el-form-item> <script> export default { name: "change", data() { change{ //定義自變量 types;'', typeChanges:'', }, //存放拉下選項,一個選項賦予一個value; typeOption: [{label: '申請類', value: '0'}], childtypeOption: [{label: '表結構變更', value: '0'}, {label: '接口變更', value: '1'}, {label: '軟件升級',value: '2'},{label: '其他',value: '2'},] } </script>
運行結果仍然是一致的,也就不做截圖參考了!有啥不明白的地方直接直接下方留言私戳我喲。
-------------------------------------------------------今日小結-------------------------------------------------------------
一: v-if條件判斷
演示:在元素 和 template 中使用 v-if 指令:
<div id="app"> <p v-if="seen">現在你看到我了</p> <template v-if="ok"> <h2>v-if教程</h2> <p>學的不僅是技術,更是夢想!</p> <p>哈哈哈,打字辛苦?。。?!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
二: v-for 循環(huán)
v-for 指令需要以 site in sites 形式的特殊語法, sites 是源數據數組并且 site 是數組元素迭代的別名。
演示:使用v-for 綁定數據到數組來渲染一個列表:代碼如下
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
看完了這篇文章,相信你對“怎么使用vue實現select下拉顯示隱藏功能”有了一定的了解,如果想了解更多相關知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道,感謝各位的閱讀!
網頁題目:怎么使用vue實現select下拉顯示隱藏功能-創(chuàng)新互聯
網址分享:http://muchs.cn/article44/dhshhe.html
成都網站建設公司_創(chuàng)新互聯,為您提供響應式網站、關鍵詞優(yōu)化、小程序開發(fā)、網站設計公司、面包屑導航、網站策劃
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯