vue學習備忘

vue學習備忘

vue中!!、！=、== 、！==、===判斷符號的用法等

！可將變量轉換成boolean類型，null、undefined和空字符串取反都爲false，其餘都爲true。

可以總結出來，“！”是邏輯與運算，並且可以與任何變量進行邏輯與將其轉化爲布爾值，“!!”則是邏輯與的取反運算，尤其後者在判斷類型時代碼簡潔高效，省去了多次判斷null、undefined和空字符串的冗餘代碼。

!!是將表達式強制轉化爲bool值的運算，運算結果爲true或false，表達式是什麼值，結果就是對應的bool值，不再取非

不是取非再取非的意思！！！

!!false=false;    要注意false和“false” 的區別！！！！！

!!"false"=true;

!!true=true;

!!(NaN || undefined || null || 0 || ' ')=false;

!null=true

!undefined=true

!''=true

!100=false

!'abc'=false

 

同一個dom元素綁定的兩個class優先級問題

<style>
.box1 {
    with: 100px;
    heigth: 100px;
    background-color: pink;
}
.box2 {
    with: 100px;
    heigth: 100px;
    background-color: blue;
}
 </style>
<div class="box1" v-bind:class="{box2: isActive}"></div>
<div class="box2" v-bind:class="{box1: isActive}"></div>
export default {
    data(){
        return {
            isActive: true
        } 
    },
}

在vue環境下運行後你會發現兩個盒子的顏色都是blue，因爲blue是後定義。
總之，一句話，同一個dom元素綁定的兩個class優先級問題跟定義順序有關，跟使用順序無關。
補充：當v-bind:style綁定樣式時，等同於內聯樣式，優先級最高。

vue中 class 和 :class 的使用

1,一個樣式的寫法

<div class="box" :class="isflag?'aaa':'bbb'">xxx</div>

data:{
    isflag:true,
}

或者對象形式寫法

<div class="box" :class="{'aaa':isflag==true}">xxx</div>

data:{
    isflag:true,
}

2,多個樣式的寫法 注意不能寫多個:class

<div class="box" :class="[isflag?'aaa':'',isflag2?'bbb':'']">xxx</div>

data:{
    isflag:true,
    isflag2:true,
}