vue中(el-button的五種類型,三種css格式)

更新時間：2022年07月20日 09:20:58 作者：練過幾年代碼，有備而來

這篇文章主要介紹了vue中(el-button的五種類型，三種css格式)具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue(el-button五種類型,三種css格式)

幾種按鈕的效果圖

在寫一個系統(tǒng)的css文件的時候，發(fā)現(xiàn)了不同類型的button的初始顏色不同，為了完美的使button的顏色和背景的顏色相映照，就去搜了一下，小做總結(jié)，為以后的使用做準(zhǔn)備。

第一種

<div>
    <el-button><span>默認(rèn)按鈕</span></el-button>
    <el-button type="primary"><span>主要按鈕</span></el-button>
    <el-button type="success"><span>成功按鈕</span></el-button>
    <el-button type="info"><span>信息按鈕</span></el-button>
    <el-button type="warning"><span>警告按鈕</span></el-button>
    <el-button type="danger"><span>危險(xiǎn)按鈕</span></el-button>
  </div>

第二種

  <div style="margin: 20px 0">
    <el-button><span>樸素按鈕</span></el-button>
    <el-button type="primary"><span>主要按鈕</span></el-button>
    <el-button type="success"><span>成功按鈕</span></el-button>
    <el-button type="info"><span>信息按鈕</span></el-button>
    <el-button type="warning"><span>警告按鈕</span></el-button>
    <el-button type="danger"><span>危險(xiǎn)按鈕</span></el-button>
  </div>

第三種

  <div>
    <el-button round><span>圓形按鈕</span></el-button>
    <el-button type="primary" round><span>主要按鈕</span></el-button>
    <el-button type="success" round><span>成功按鈕</span></el-button>
    <el-button type="info" round><span>信息按鈕</span></el-button>
    <el-button type="warning" round><span>警告按鈕</span></el-button>
    <el-button type="danger" round><span>危險(xiǎn)按鈕</span></el-button>
  </div>

需要的話自取，如果說要記的話，可以記一下下面這幾點(diǎn)。

a.round設(shè)置圓邊按鈕

b.

默認(rèn)白
主要藍(lán) primary
成功綠 success
信息灰 info
警告橘黃 warning
危險(xiǎn)紅 danger

vue中的樣式

常見的樣式 :

① : 行內(nèi)樣式
② : 在style中書寫樣式

實(shí)例一

使用v-bind給class設(shè)置一個數(shù)組樣式

代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="lib/vue-2.4.0.js"></script>
        <style>
            .red {
                color: salmon;
            }
            .size {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="['red','size']">我是一個div</div>
        </div>
        <script>
            new Vue({
                el: "#app"
            })
        </script>
    </body>
</html>

截圖

實(shí)例二

使用三元運(yùn)算符來控制樣式

代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="lib/vue-2.4.0.js"></script>
        <style>
            .red {
                color: salmon;
            }
            .size {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="flag?'size':'red'">我是一個div</div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    flag: true
                }
            })
        </script>
    </body>
</html>

截圖

當(dāng)flag 為true時

當(dāng)flag 為false時

實(shí)例三

通過點(diǎn)擊事件改變div的顏色 , 大小 , 背景顏色

代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="lib/vue-2.4.0.js"></script>
        <style>
            .red {
                color: salmon;
            }
            .size {
                font-size: 20px;
            }
            .back {
                background-color: rgb(175, 244, 96);
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="classObj">我是一個div</div>
            <button @click="changeStyle">點(diǎn)擊我</button>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    classObj: {
                        'red': true,
                        'size': true,
                        'back': true
                    }
                },
                methods: {
                    changeStyle() {
                        this.classObj.red = !this.classObj.red,
                            this.classObj.size = !this.classObj.size,
                            this.classObj.back = !this.classObj.back
                    }
                }
            })
        </script>
    </body>
</html>

截圖