上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    慵懒
    4 天前
  • 签到天数: 193 天

    [LV.7]常住居民III

    710

    主题

    5882

    回帖

    6705

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6705

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-10-12 19:13:30 | 显示全部楼层 | 阅读模式

    前文

    这节课我们学习条件判断

    上来一串代码

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表