vue實現(xiàn)select下拉顯示隱藏功能

第vue實現(xiàn)select下拉顯示隱藏功能今日，慫慫就來說說，在項目中剛遇到這么一個功能需求；

描述：當(dāng)下拉選擇不同的屬性選項，需展示對應(yīng)的內(nèi)容界面；

select下拉菜單如下：

當(dāng)下拉選擇---------------------------------------

當(dāng)面臨下拉有百上千個選項的時候，為了提高代碼的可讀性以及提交代碼的運行效率?？梢詫elect下拉自定義一個數(shù)組存儲；

el-form-itemlabel="類型:"

el-selectv-model="change.types"

el-optionv-for="optionintypeOption":key="option.value":label="option.label"

:value="option.value"

/el-option

/el-select

el-selectv-model="change.typeChanges"@change="chooseChild"

el-optionv-for="optioninchildtypeOption":key="option.value":label="option.label"

:value="option.value"

/el-option

/el-select

/el-form-item

script

exportdefault{

name:"change",

data(){

change{

//定義自變量

types;'',

typeChanges:'',

//存放拉下選項，一個選項賦予一個value;

typeOption:[{label:'申請類',value:'0'}],

childtypeOption:[{label:'表結(jié)構(gòu)變更',value:'0'},{label:'接口變更',value:'1'},

{label:'軟件升級',value:'2'},{label:'其他',value:'2'},]

/script

運行結(jié)果仍然是一致的，也就不做截圖參考了！有啥不明白的地方直接直接下方留言私戳我喲。

-------------------------------------------------------今日小結(jié)-------------------------------------------------------------

一：v-if條件判斷

演示：在元素和template中使用v-if指令：

divid="app"

pv-if="seen"現(xiàn)在你看到我了/p

templatev-if="ok"

h1v-if教程/h1

p學(xué)的不僅是技術(shù)，更是夢想！/p

p哈哈哈，打字辛苦?。。。?p

/template

/div

script

newVue({

el:'#app',

data:{

seen:true,

ok:true

/script

二：v-for循環(huán)

v-for指令需要以siteinsites形式的特殊語法，sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名。

演示：使用v-for綁定數(shù)據(jù)到數(shù)組來渲染一個列表：代碼如下

divid="app"

liv-for="siteinsites"

{{}}

/li

/ol

/div

script

newVue({

el:'#app',

data:{