一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線(xiàn)課程
  • 觀(guān)看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

Select、Switch組件的使用

汽車(chē)電子技術(shù) ? 來(lái)源:Java大聯(lián)盟 ? 作者:楠哥 ? 2023-02-28 15:40 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

Select 下拉框

Element UI 的 Select 直接使用 el-select / el-option 標(biāo)簽即可,屬性 v-model 表示該下拉框綁定的對(duì)象,即最終選擇的值會(huì)賦給該對(duì)象,直接用于 el-select 標(biāo)簽,el-option 標(biāo)簽直接用來(lái)遍歷可選數(shù)據(jù),然后做展示,其中 label 屬性為選項(xiàng)展示的文本信息,value 為該選項(xiàng)的值,代碼如下所示:

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
      <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"template>


<script>
export default {
  data(){
    {
      options: [{
        value: '1',
        label: '手機(jī)'
      }, {
        value: '2',
        label: '電腦'
      }, {
        value: '3',
        label: '電視'
      }],
      value: ''
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

Select 的默認(rèn)值跟 value 進(jìn)行綁定,此時(shí)的 value = '',所以沒(méi)有默認(rèn)值,而當(dāng)我們?cè)O(shè)置 value = '2' 時(shí),效果如下所示:

圖片

如果要禁用某個(gè)下拉選項(xiàng)的話(huà),只需要給數(shù)據(jù)添加 disabled = true 即可,代碼如下所示:

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
      <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      options: [{
        value: '1',
        label: '手機(jī)'
      }, {
        value: '2',
        label: '電腦'
      }, {
        value: '3',
        label: '電視',
        disabled: true
      }],
      value: ''
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

Select 常用的事件為 change,即更改下拉框選項(xiàng)的時(shí)候,會(huì)觸發(fā)該方法,代碼如下:

<template>
  <el-select v-model="val" placeholder="請(qǐng)選擇" @change="change">
      <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      options: [{
        value: '1',
        label: '手機(jī)'
      }, {
        value: '2',
        label: '電腦'
      }, {
        value: '3',
        label: '電視',
        disabled: true
      }],
      val: ''
    }
  },
  methods:{
    change(){
      console.log('當(dāng)前選擇的是:'+this.val)
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

Switch 開(kāi)關(guān)

Switch 組件表示兩種相互對(duì)立的狀態(tài)間的切換,多用于觸發(fā)「開(kāi)/關(guān)」,使用 el-switch 標(biāo)簽即可,綁定 v-model 到一個(gè) Boolean 類(lèi)型的變量,分別表示開(kāi)/關(guān),可以使用 active-color 屬性與 inactive-color 屬性來(lái)設(shè)置開(kāi)關(guān)的背景色,代碼如下所示:

<template>
  <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      value: true
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

圖片

還可以使用 active-text 屬性與 inactive-text 屬性來(lái)設(shè)置開(kāi)關(guān)的文字描述,active-text 表示開(kāi)啟的文字描述,inactive-text 表示關(guān)閉的文字描述,代碼如下所示:

<template>
  <el-switch
          style="display: block"
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="上架"
          inactive-text="下架">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      value: true
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

圖片

Switch 常用的事件為 change,即點(diǎn)擊開(kāi)關(guān)的時(shí)候,會(huì)觸發(fā)該方法,代碼如下:

<template>
  <el-switch
          style="display: block"
          v-model="val"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="上架"
          inactive-text="下架"
          @change="change">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      val: true
    }
  },
  methods:{
    change(){
      console.log('當(dāng)前開(kāi)關(guān)的狀態(tài):'+this.val)
    }
  }
}
class="hljs-name"script>

效果圖:

圖片

以上就是 Element UI 中 Select、Switch 組件的使用,下一篇教程楠哥將繼續(xù)帶領(lǐng)大家學(xué)習(xí) Element UI 其他組件的使用,如果你覺(jué)得這篇教程對(duì)你有幫助,就幫楠哥點(diǎn)個(gè)贊吧,我們下期教程再見(jiàn)。


聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀(guān)點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • Elements
    +關(guān)注

    關(guān)注

    0

    文章

    6

    瀏覽量

    5389
  • 文本信息
    +關(guān)注

    關(guān)注

    0

    文章

    3

    瀏覽量

    5216
  • select
    +關(guān)注

    關(guān)注

    0

    文章

    28

    瀏覽量

    4096
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    How to select the right eSATA

    How to select the right eSATA connector and cable:External SATA (or called eSATA) is popular
    發(fā)表于 04-08 15:33 ?9次下載

    How to Select the Right eSATA

    How to Select the Right eSATA Connector and Cable:External SATA (eSATA) applications range from a
    發(fā)表于 04-11 08:40 ?18次下載

    How to Select the Correct Inde

    It is important to select the correct tip for your application. Agilent Technologies offers high
    發(fā)表于 08-16 15:10 ?8次下載

    2014_Mass_Select_20140609

    2014_Mass_Select_20140609 PCB設(shè)計(jì)大賽。
    發(fā)表于 05-17 11:09 ?0次下載

    SuperK_SELECT數(shù)據(jù)手冊(cè)

    The SuperK SELECT is a tunable wavelength filter based on Acousto-optic Tunable Filters (AOTF
    發(fā)表于 12-25 22:04 ?0次下載

    NetApp_ONTAP_Select數(shù)據(jù)手冊(cè)

    NetApp_ONTAP_Select
    發(fā)表于 12-28 14:54 ?0次下載

    select語(yǔ)句和update語(yǔ)句分別是怎么執(zhí)行的

    最近有粉絲面試互聯(lián)網(wǎng)公司被問(wèn)到:你知道select語(yǔ)句和update語(yǔ)句分別是怎么執(zhí)行的嗎?,要我寫(xiě)一篇這兩者執(zhí)行SQL語(yǔ)句的區(qū)別,這不就來(lái)了。 總的來(lái)說(shuō),select和update執(zhí)行的邏輯大體
    的頭像 發(fā)表于 11-03 09:41 ?3836次閱讀
    <b class='flag-5'>select</b>語(yǔ)句和update語(yǔ)句分別是怎么執(zhí)行的

    簡(jiǎn)易的日歷組件教程案例

    可以根據(jù)自己需要直接傳入“0”或者“1”,0表示亮模式白色背景、1表示暗模式黑色背景,默認(rèn)值為0。 2、select-date屬性 引用組件時(shí)傳遞屬性select-date=“2021-05-05
    發(fā)表于 04-07 09:27 ?2次下載

    rt-smart select的實(shí)現(xiàn)

    select()是常用的多路IO復(fù)用的posix調(diào)用接口。select () 函數(shù)指示指定的文件描述符中的哪些已準(zhǔn)備好讀取、準(zhǔn)備好寫(xiě)入或有待處理的錯(cuò)誤條件。
    的頭像 發(fā)表于 08-09 16:05 ?1089次閱讀

    基于select!宏的進(jìn)階用法

    Tokio 是一個(gè)基于 Rust 語(yǔ)言的異步編程框架,它提供了一組工具和庫(kù),使得異步編程變得更加容易和高效。其中最重要的組件之一就是 select!宏。 select!宏是 Tokio 中的一個(gè)核心
    的頭像 發(fā)表于 09-19 15:35 ?1039次閱讀

    epoll和select使用區(qū)別

    epoll 和select 相比于select,epoll最大的好處在于它不會(huì)隨著監(jiān)聽(tīng)fd數(shù)目的增長(zhǎng)而降低效率。因?yàn)樵趦?nèi)核中的select實(shí)現(xiàn)中,它是采用輪詢(xún)來(lái)處理的,輪詢(xún)的fd數(shù)目越多,自然耗時(shí)
    的頭像 發(fā)表于 11-09 14:14 ?1565次閱讀
    epoll和<b class='flag-5'>select</b>使用區(qū)別

    數(shù)據(jù)庫(kù)select語(yǔ)句的基本用法

    數(shù)據(jù)庫(kù)中的SELECT語(yǔ)句是用于從數(shù)據(jù)庫(kù)表中檢索數(shù)據(jù)的基本工具。它是數(shù)據(jù)庫(kù)語(yǔ)言(如SQL)中最常用的命令之一,幾乎在每個(gè)數(shù)據(jù)庫(kù)管理系統(tǒng)中都有。 SELECT語(yǔ)句的基本語(yǔ)法如下: SELECT 列名
    的頭像 發(fā)表于 11-17 15:08 ?2798次閱讀

    SELECT語(yǔ)句的基本格式

    SELECT語(yǔ)句是SQL中最基本和最重要的語(yǔ)句之一。它被用于從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)。在本文中,我們將詳細(xì)介紹SELECT語(yǔ)句的基本格式和各個(gè)組成部分。 SELECT語(yǔ)句的基本格式如下: SELEC
    的頭像 發(fā)表于 11-17 15:10 ?3373次閱讀

    select語(yǔ)句的基本語(yǔ)法

    SELECT語(yǔ)句是SQL(Structured Query Language,結(jié)構(gòu)化查詢(xún)語(yǔ)言)中的一種查詢(xún)語(yǔ)句,用于從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)。它是數(shù)據(jù)庫(kù)操作中最常用和基本的語(yǔ)句之一。在本文中,我將為您詳盡
    的頭像 發(fā)表于 11-17 16:23 ?3465次閱讀

    HarmonyOS開(kāi)發(fā)案例:【 switch、chart組件的使用】

    基于switch組件和chart組件,實(shí)現(xiàn)線(xiàn)形圖、占比圖、柱狀圖,并通過(guò)switch切換chart組件數(shù)據(jù)的動(dòng)靜態(tài)顯示。
    的頭像 發(fā)表于 04-25 20:58 ?1075次閱讀
    HarmonyOS開(kāi)發(fā)案例:【 <b class='flag-5'>switch</b>、chart<b class='flag-5'>組件</b>的使用】