• vue用法示例（二）

    1、v-if决定标签是否显示

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <p v-if="seen">现在你看到我了</p>
    11.     <template v-if="ok">
    12.       <p>学的不仅是技术，更是梦想！</p>
    13.       <p>哈哈哈，打字辛苦啊！！！</p>
    14.     </template>
    15. </div>
    16.     
    17. <script>
    18. new Vue({
    19.   el: '#app',
    20.   data: {
    21.     seen: true,
    22.     ok: true
    23.   }
    24. })
    25. </script>
    26. </body>
    27. </html>

    2、v-show

    v-show指令和v-if指令的作用一样，都是跟后面的表达式真假来决定元素标签是否展示的

    为什么明明已经有v-if了，还要创造个v-show出来呢？

    答案很简单：他俩的真正实现技术 和 性能效果是有差异的

    v-if适合不频繁变化的场景 v-show适合频繁切换真假的场景

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <h1 v-show="ok">Hello!</h1>
    11. </div>
    12.         
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     ok: true
    18.   }
    19. })
    20. </script>
    21. </body>
    22. </html>

    3、v-else v-else-if

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <div v-if="type === 'A'">
    11.       A
    12.         </div>
    13.         <div v-else-if="type === 'B'">
    14.           B
    15.         </div>
    16.         <div v-else-if="type === 'C'">
    17.           C
    18.         </div>
    19.         <div v-else>
    20.           Not A/B/C
    21.         </div>
    22. </div>
    23.         
    24. <script>
    25. new Vue({
    26.   el: '#app',
    27.   data: {
    28.     type: 'C'
    29.   }
    30. })
    31. </script>
    32. </body>
    33. </html>

    4、v-for 循环 循环列表 循环字典

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.   <ol>
    11.     <li v-for="site in sites">
    12.       {{ site.name }}
    13.     </li>
    14.   </ol>
    15.         
    16.          <ol>
    17.     <li v-for="site in sites1">
    18.       {{ site }}
    19.     </li>
    20.   </ol>
    21. </div>
    22.  
    23. <script>
    24. new Vue({
    25.   el: '#app',
    26.   data: {
    27.     sites: [
    28.       { name: 'Runoob' },
    29.       { name: 'Google' },
    30.       { name: 'Taobao' }
    31.     ],
    32.       sites1:['zhaocuixia','zhaohongxia','zhaoyuxia']
    33.           
    34.   }
    35. })
    36. </script>
    37. </body>
    38. </html>

  • 相关阅读:
    Sui上低Gas费为预言机注入强大动力
    树莓派和PC的串口通信编程
    ELF文件结构
    Java第12章-Iterator接口、Map接口、Collections类
    如何认识python
    maven的生命周期
    应对广告虚假流量，app广告变现该如何风控？
    OpenGL 透视投影编程
    深度适配云环境，火山引擎推出云操作系统veLinux
    C++中返回类型与return语句
  • 原文地址：https://blog.csdn.net/daxiashangxian/article/details/138086634