• (5)打鸡儿教你Vue.js


    条件与循环
    条件判断使用 v-if 指令

    <p v-if="seen">
    <template v-if="ok">
    <script>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true
      }
    })
    </script>
    
    <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>
    
    <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-show 指令来根据条件展示元素:

    <body>
    <div id="app">
        <h1 v-show="ok">Hello!</h1>
    </div>
    	
    <script>
    new Vue({
      el: '#app',
      data: {
        ok: true
      }
    })
    </script>
    </body>
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    CodeForces
    EOJ 3506. 斐波那契数列
    牛客练习赛13 D幸运数字Ⅳ . 康托逆展开
    UVA
    Piggy-Bank HDU
    Dollar Dayz POJ
    UVA 674 Coin Change (完全背包)
    python OOP (1)
    python lambda简易使用
    python whl模块安装方法
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140199.html
Copyright © 2020-2023  润新知