小編給大家分享一下怎么使用vue實現(xiàn)select下拉顯示隱藏功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站專注于利川企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站開發(fā)。利川網(wǎng)站建設(shè)公司,為利川等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

select下拉菜單如下：

當(dāng)下拉選擇【表結(jié)構(gòu)變更】、即展示如下界面：

當(dāng)下拉選擇【接口變更】、即展示如下界面：

代碼實現(xiàn) vue.js：

//定義一個select下拉菜單
<el-form-item label="類型">
 <el-select v-model="form.typeChanges">
  <el-option label="表結(jié)構(gòu)變更" 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>
//通過結(jié)合vue-for循環(huán)以及vue-id判斷條件
//判斷條件一：當(dāng)下拉選中【表結(jié)構(gòu)變更】，即顯示以下界面
 <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>
//判斷條件二：當(dāng)下拉選中【接口變更】，即顯示以下界面
 <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>

代碼演示截圖：

當(dāng)下拉選中【表結(jié)構(gòu)變更】：

當(dāng)下拉選中【接口變更】：

----------------------------------【功能拓展】---------------------------------------
當(dāng)面臨下拉有百上千個選項的時候，為了提高代碼的可讀性以及提交代碼的運行效率。可以對select下拉自定義一個數(shù)組存儲；

 <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: '表結(jié)構(gòu)變更', value: '0'}, {label: '接口變更', value: '1'}, 
   {label: '軟件升級',value: '2'},{label: '其他',value: '2'},] 
}

</script>

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

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

一： v-if條件判斷

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

<div id="app">
 <p v-if="seen">現(xiàn)在你看到我了</p>
 <template v-if="ok">
  <h2>v-if教程</h2>
  <p>學(xué)的不僅是技術(shù)，更是夢想！</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 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。

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

<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實現(xiàn)select下拉顯示隱藏功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁題目：怎么使用vue實現(xiàn)select下拉顯示隱藏功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.chinadenli.net/article44/dhshhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、小程序開發(fā)、網(wǎng)站設(shè)計公司、面包屑導(dǎo)航、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)