前文
这节课我们学习条件判断
上来一串代码
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
<button @click='ModifyStatus'>Modify</button>
<span v-if='!controlshow'>我是谁?</span>
<span v-else>妙蛙种子!</span>
</div>`
var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
data() {
return {
controlshow: false,
}
},
methods:{
ModifyStatus(){
this.controlshow=!this.controlshow
},
}
}
const app = Vue.createApp(Counter);
app.mount("#app");
我们开始分析
<button @click='ModifyStatus'>Modify</button>
<span v-if='!controlshow'>我是谁?</span>
<span v-else>妙蛙种子!</span>
这里点击按钮触发ModifyStatus函数
ModifyStatus(){
this.controlshow=!this.controlshow
},
<span v-if='!controlshow'>我是谁?</span>
<span v-else>妙蛙种子!</span>
这里判断状态,如果!controlshow为真的状态,则显示相应元素,如果为假,则显示v-else所在元素
因为!为取反运算符,所以controlshow为假时,则显示上半部分元素
与此相关的还有
v-else-if
因为与js语法基本相似,这里就不解释了。