• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3Class 和 Style 綁定

        發布時間:2023-02-20 21:23:33???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.Class 綁定
        2.Style 綁定
        本節課我們來開始學習 Vue3.x class style 綁定的方法。
        一.Class 綁定
        1. 先復習一下前面課程中 v-bind:的用法:v-bind:class :class 簡寫即可;
        <style>
        .red {
        color: red;
        }
        style>
        <span v-bind:class="className">Class 綁定效果span>
        data() {
        return {
        className : 'red'
        }
        },
        PS:再重復一次,className 如果作為 v-bind:class 參數的值,是不需要加雙括號的;
        2. 如果想通過一個布爾值來實現,是否要加載這個樣式,那么可以改寫成如下:
        // data() 創建一個布爾屬性
        isRed : false
        // 當 isRed 為 false:class='',當為 true 時:class='red',解構語法用{}包含
        // {class 名稱 : 布爾屬性}
        <span v-bind:class="{red : isRed}">Css 綁定效果span>
        PS:這里屬性 className 就沒有被使用,并且支持多個 class 疊加,-號需單引號防解析錯誤;
        v-bind:class="{red : isRed, 'big-font' : isBigFont}"
        3. 判斷 class 樣式的布爾屬性太多,且指令的參數值太復雜導致壓力大,可簡寫:
        <span v-bind:class="classObject">Css 綁定效果span>
        data() {
        return {
        counter : 100,
        classObject : {
        red : true,
        'big-font' : true
        }
        }
        },
        PS:使用計算屬性來實現如上的功能:
        // 計算屬性
        computed : {
        classObject() {
        return {
        red : true,
        'big-font' : true
        }
        }
        }
        4. 還有一種列表式數組方式:即你添加就有效果,不添加就沒有效果,如下:
        <span v-bind:class="[redClass, bigFontClass]">Css 綁定效果span>
        data() {
        return {
        redClass : 'red',
        bigFontClass : 'big-font',
        }
        },
        PS:列表式數組也支持類似布爾是否顯示,通過數組的三元來實現;
        <span v-bind:class="[isRed ? redClass : '', bigFontClass]">Css 綁定效果span>
        PS:三種方式第一次用建議選選其中一種,否則會比較混亂;學習后期,可根據場景查詢使用;
        二.Style 綁定
        1. 有了 Class 綁定基礎,Style 行內綁定就簡單多了,方式也是類似:
        // 解構綁定
        <span v-bind:style="{color : styleColor}">Style 綁定效果span>
        // 綁定屬性對象或計算屬性綁定
        <span v-bind:style="StyleObject">Style 綁定效果span>
        // 列表式數組綁定
        <span v-bind:style="[redStyle]">Style 綁定效果span>
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区