第九篇:vue条件语句

好家伙,终于有个简单了的

v-if    条件判断

<div id="app">

    <p v-if="seen">现在你看到我了</p>     /*判断seen的值后,选择是否输出文本*/

    <template v-if="ok">

      <h1>菜鸟教程</h1>

      <p>学的不仅是技术，更是梦想！</p>

      <p>哈哈哈，打字辛苦啊！！！</p>

    </template>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    seen: true,　　　　　　　　　　　　

    ok: true　　　　　　　　　　　　　　/*判断值都是ture*/

 } }) </script>

v-else否则

<div id="app">

    <div v-if="Math.random() > 0.5">   /*判断是否大于0.5,是就输出yes*/
　　　　YES

    </div>

    <div v-else>　　　　　　　　　　　　　　/*否就输入F**k you*/

      F**K YOU

    </div>

</div>

<script>

new Vue({

  el: '#app'

})

</script>

v-else-if   大概是?多项选择题

<div id="app">

    <div v-if="type === 'A'">  　　　　　　　　 /*这里是多项选择,判断等于哪项,type等于多少就输出对应的一项*/

      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>

Tips:1.v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

　　2.v-show约等于v-if

第九篇:vue条件语句的相关教程结束。