06.Vue3.x中使用JavaScript表达式 、条件判断、 计算属性和watch侦听

一、Vue3.x模板中使用JavaScript表达式

直接用{ {}}可以编写js表达式

二、 v-if v-else v-else-if v-show

1.v-if

逻辑

data(){
   
    return{
   
        flag:1
    }
}

模板

<!--当flag为true是，p标签才显示-->
<p v-if="flag">
    v-if falg=true
</p>

2.v-if v-else

<div v-if="Math.random()>0.5">
    大于0.5
</div>
<div v-else>
    小于0.5
</div>

v-else元素必须紧跟在带v-if或者v-else-if的元素后面，否则它将不会被识别。

3.v-else-if

<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
</div>
</div>
<div v-else-if="type==='C'">
    C
</div>
<div v-else>
    not A/B/C
</div>

与v-else相似，