vue.js - 如何使用vue的v-for来根据json制作一个列表？

问题描述

问 题

<ul class="list" id="note">
    <li class="article" v-for=" l in list"  data-id="">
        <pre class="subject">{{ l.pre }}</pre>
        <div class="box">
            <div class="info">
                <div class="text">
                <span id="year">{{ l.date.year }}</span>年
                <span id="month">{{ l.date.month }}</span>月
                <span id="day">{{ l.date.day }}</span>日
            </div>
            <div class="text">
                <span id="hour">{{ l.date.hour }}</span>时
                <span id="minute">{{ l.date.minute }}</span>分
                <span id="second">{{ l.date.second }}</span>秒
            </div>
            <div class="text">
                IP:
                <span id="ip">{{ l.ip }}</span>
            </div>
        </div>
        <div class="function">
            <div class="button" onclick="del('')">删除</div>
            <div class="button" onclick="edit('')">编辑</div>
        </div>
    </li>
</ul>
<script>
    var note = new Vue({
    el:'#note',
    data:{
        list:{
            mod:{
                id:'',
                pre:'',
                date:{
                    year:'',
                    month:'',
                    day:'',
                    hour:'',
                    minute:'',
                    second:''
                },
                ip:'10.0.0.1'
            },
            mods:{
                id:'',
                pre:'',
                date:{
                    year:'',
                    month:'',
                    day:'',
                    hour:'',
                    minute:'',
                    second:''
                },
                ip:'10.0.0.2'
            },
        },
    }

});
</script>

=..= 这样写已经能渲染两个li了。但是要怎么要才能根据json来循环输出啊，。

json:https://www.ahchoo.cc/note/re...

解决方案

mounted () {
    this.fetchMsg()
}

data () {
    return {
        items: []
    }
}

methods: {
    fetchMsg () {
        axios.get('https://www.ahchoo.cc/note/remsg.php').then(response => {
            return response.data
        }).then(data => {
            console.log(data)
            this.items = data
        }).catch(error => {
            console.log(error.message)
        })
    }
}

以上代码为es6，并实际运行于项目上。

建议命名不要使用list

这篇关于vue.js - 如何使用vue的v-for来根据json制作一个列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！