zoukankan      html  css  js  c++  java
  • Vue(六):条件与循环

    1.条件(v-if)

    控制切换一个元素是否显示

    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    <script>
    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    </script>

    v-else-if和v-else

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

    <div id="app">
        {{username}}的成绩
        <br>
        <p v-if="randomnum < 6 && randomnum > 0">不及格</p>
        <p v-else-if="randomnum < 8 && randomnum >= 6">良</p>
        <p v-else-if="randomnum <= 10 && randomnum >= 8">优</p>
        <p v-else>缺考</p>
    </div>
        
    <script>
        new Vue({
            el:"#app",
            data:{
                "username":"小小",
                "randomnum":Math.random()*10
            }
        })
    </script>

    这段代码多运行几次,会出现不同的结果。

    v-show

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

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

    2.循环(v-for)

    绑定数组数据渲染列表

    <div id="app">
        <table>
            <tr v-for="device in devices">
                <td>{{device.devicetype}}</td>
                <td>{{device.devicenumber}}</td>
            </tr>
        </table>
    </div>
    <script>
        var data = {
            "devices":[
                {"devicetype":"电梯","devicenumber":2625377},
                {"devicetype":"起重机","devicenumber":2625378}
            ]
        }
        new Vue({
            el: '#app',
            data:data
        });
    </script>

    分别显示index、key和value

    <div id="app">
            <ul>
                <li v-for="(value, key, index) in team">
                    {{index}} . {{key}} : {{value}}
                </li>
            </ul>
        </div>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    team:{
                        name:'小王',
                        age:26,
                        group:'销售部'
                    }
                }
            })
        </script>

    迭代整数

    <div id="app">
            <ul>
                <li v-for="n in 5">
                    {{n}}
                </li>
            </ul>
        </div>
    
        <script>
            new Vue({
                el:'#app'
            })
        </script>

  • 相关阅读:
    tensorflow搭建神经网络基本流程
    为什么Linux 实例执行 df 和 du 查看磁盘时结果不一致
    MySQL高可用架构之MHA
    Postgresql 用户管理
    PXE+Kickstart无人值守安装CentOS 7
    linux shell实用常用命令
    常用压缩命令
    mongodb 备份还原
    mongodb 备份脚本
    mongodb 日志清理
  • 原文地址:https://www.cnblogs.com/shamo89/p/10193064.html
Copyright © 2011-2022 走看看