• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if
    時間: 2018-11-09 10:30:04     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-bind”,本篇文章講解“vue.js指令v-if+v-else+v-else-if”。


    根據表達式的值的真假條件渲染元素。

    1. v-if

    很多大網站都有很多語言版本,可以根據自己的語言進行切換網站語言版本。以此為例進行學習。

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    瀏覽器訪問:

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    注意

    1. v-if是惰性的:如果在初始渲染時條件為假,則不在dom中渲染該標簽;為真是則渲染。


    2. v-else

    和普通的if/else組合一樣,注意順序即可,即v-else前必須有一個v-if。

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    瀏覽器訪問:

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if



    3. v-else-if

    同樣注意順序即可,必須在v-if后v-else前。

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    瀏覽器訪問:

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    注意

    1. v-if、v-else-if的條件為表達式,根據表達式的真假進行渲染。

    2. v-if、v-else-if、v-else是通過是否有此元素進行顯示與隱藏的。


    4. template標簽

    因為v-if是一個指令,所以必須將它添加到一個元素上。但是如果想切換多個元素呢?此時可以把一個<template>元素當做不可見的包裹元素,并在上面使用v-if。最終的渲染結果將不包含<template>元素。

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    瀏覽器訪問:

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指令v-show”

    「Vue.js開發連載五」vue.js指令v-if+v-else+v-else-if
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>