阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js if 语句

      条件判断

      v-if

      条件判断使用 v-if 指令:

      v-if 指令

      在元素 和 template 中使用 v-if 指令:

      <div id="app">
          <p v-if="seen">现在你看到我了</p>
          <template v-if="ok">
            <h1>阿西河前端教程</h1>
            <p>一个助你成为全栈开发的网站</p>
            <p>哈哈哈,打字辛苦啊!!!</p>
          </template>
      </div>
      
      <script>
      new Vue({
        el: '#app',
        data: {
          seen: true,
          ok: true
        }
      })
      </script>
      

      这里, v-if 指令将根据表达式 seen 的值 (true 或 false ) 来决定是否插入 p 元素。

      在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:

      <!-- Handlebars 模板 -->
      {{#if ok}}
        <h1>Yes</h1>
      {{/if}}
      

      v-else

      可以用 v-else 指令给 v-if 添加一个 “else” 块:

      v-else 指令

      随机生成一个数字,判断是否大于 0.5,然后输出对应信息:

      <div id="app">
          <div v-if="Math.random() > 0.5">
            Sorry
          </div>
          <div v-else>
            Not sorry
          </div>
      </div>
      
      <script>
      new Vue({
        el: '#app'
      })
      </script>
      

      v-else-if

      v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

      v-else 指令

      判断 type 变量的值:

      <div id="app">
          <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>
      </div>
      
      <script>
      new Vue({
        el: '#app',
        data: {
          type: 'C'
        }
      })
      </script>
      

      v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后。

      v-show

      我们也可以使用 v-show 指令来根据条件展示元素:

      v-show 指令

      <h1 v-show="ok">Hello!</h1>
      
      目录
      目录