[油猴脚本开发指南]条件判断

李恒道

前文

这节课我们学习条件判断

上来一串代码

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语法基本相似，这里就不解释了。