master

分支 (1)

管理

管理

master

front-end-development-learning
/
20.2 vue v-for.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        table {
            border-right: 1px solid #804040;
            border-bottom: 1px solid #804040;
            border-collapse: collapse;

        }

        td {
            border-left: 1px solid #804040;
            border-top: 1px solid #804040;
            padding: 2px;
            width: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <td v-for="(item,key) in ex[0]">{{key}}</td>
        </tr>
        <tr v-for="(item,index) in ex" >
            <td v-for="value in item" v-if="index!=1">
                {{value}}
            </td>
            <td v-for="value in item" v-if="index==1" style="background-color:red;">
                {{value}}
            </td>
        </tr>


    </table>
</div>

</body>
<script>
    var ex = [//今天+未来4天
        {
            "date": "22",
            "ymd": "2018-09-22",   //年月日  （新增）
            "week": "星期六",       //星期 （新增）
            "sunrise": "05:57",
            "high": "高温 26.0℃",
            "low": "低温 15.0℃",
            "sunset": "18:10",
            "aqi": 55.0,
            "fx": "西北风",
            "fl": "4-5级",
            "type": "晴",
            "notice": "愿你拥有比阳光明媚的心情"
        },
        {
            "date": "23",
            "ymd": "2018-09-22",   //年月日  （新增）
            "week": "星期日",       //星期 （新增）
            "sunrise": "05:58",
            "high": "高温 23.0℃",
            "low": "低温 14.0℃",
            "sunset": "18:09",
            "aqi": 29.0,
            "fx": "西北风",
            "fl": "4-5级",
            "type": "晴",
            "notice": "愿你拥有比阳光明媚的心情"
        },
        {
            "date": "24",
            "ymd": "2018-09-22",   //年月日  （新增）
            "week": "星期一",       //星期 （新增）
            "sunrise": "05:59",
            "high": "高温 24.0℃",
            "low": "低温 15.0℃",
            "sunset": "18:07",
            "aqi": 25.0,
            "fx": "西北风",
            "fl": "<3级",
            "type": "晴",
            "notice": "愿你拥有比阳光明媚的心情"
        },
        {
            "date": "25",
            "ymd": "2018-09-22",   //年月日  （新增）
            "week": "星期二",       //星期 （新增）
            "sunrise": "06:00",
            "high": "高温 24.0℃",
            "low": "低温 16.0℃",
            "sunset": "18:05",
            "aqi": 56.0,
            "fx": "西南风",
            "fl": "<3级",
            "type": "晴",
            "notice": "愿你拥有比阳光明媚的心情"
        },
        {
            "date": "26",
            "ymd": "2018-09-22",   //年月日  （新增）
            "week": "星期三",       //星期 （新增）
            "sunrise": "06:01",
            "high": "高温 24.0℃",
            "low": "低温 17.0℃",
            "sunset": "18:04",
            "aqi": 86.0,
            "fx": "西南风",
            "fl": "3-4级",
            "type": "阴",
            "notice": "不要被阴云遮挡住好心情"
        }
    ]
    let vm = new Vue({
        el: "#app",
        data: {
            ex: ex
        }
    })
</script>
</html>