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

[油猴脚本开发指南]条件渲染

[复制链接]
  • TA的每日心情
    开心
    3 小时前
  • 签到天数: 57 天

    [LV.5]常住居民I

    354

    主题

    3128

    帖子

    3129

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3129

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-2-25 18:37:28 | 显示全部楼层 | 阅读模式

    v-if

    v-if相当于js的ifelse语句

    根据变量的真假来进行渲染

    <h1 v-if="awesome">Vue is awesome!</h1>

    同理,我们也可以添加v-else,等同于else

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    template

    在html中temaplate是一个不可见的元素

    而在vue同理,template相当于一个虚拟的元素,我们可以用它来包裹元素

    然后进行一些逻辑的判断

    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

    v-else

    必须跟v-if或v-else-if连用

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    v-else-if

    类似于if else if else if

    我们可以连续使用

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

    v-show

    v-sow与v-if同理

    唯一的区别是v-if为假的时候,会直接销毁元素

    而v-show相当于使用css的display:none来临时隐藏元素

    但是元素依然存在于页面中

    注意

    v-show不支持template元素,也不支持v-else

    注意

    v-if与v-for不建议连用

    v-if在低配置机器上渲染成本较高

    但是v-if可以用来控制子组件的销毁,再次为真的时候可以直接继续进行初始化流程

    对普通开发的时候更友好

    如果使用v-show的话,我们需要对变量的更改做更多的监听,逻辑更为复杂

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    昨天 09:04
  • 签到天数: 167 天

    [LV.7]常住居民III

    25

    主题

    647

    帖子

    6280

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    Rank: 10Rank: 10Rank: 10

    积分
    6280

    猫咪币纪念章活跃会员三好学生热心会员中秋纪念章国庆纪念章荣誉开发者家财万贯

    发表于 2022-2-25 20:54:40 | 显示全部楼层
    v-slot
    回复

    使用道具 举报

    发表回复

    本版积分规则

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