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,
}