vue渲染json

Question

数据{
"status":1,
"data":[
{"site_id":"1","site_name":"u54c8u5c14u6ee8"}
]
}
怎么用vue渲染然到界面上

Answer 1

//js

var vm = new Vue({
    el:'#outerbox',
    data:{
        "status":1,
        "data":[
            {"site_id":"1","site_name":"u54c8u5c14u6ee8"}
        ]
    }
})

//html,dom

<div id="outerbox">
<span v-text="status"></span>
</div>

Answer 2

js:

var vm = new Vue({
    el:"#app",
    data:{
        status:1,
         data:[
                {"site_id":"1","site_name":"u54c8u5c14u6ee8"}
            ]
    }
})

html:

<div id="app">
    <span v-text="status"></span>
    <div v-for="d in data">{{d.site_id}}:<span>{{d.site_name}}</span></div>
</div>

Answer 3

js:

var vm = new Vue({
    el: '.box',
    data: {
        "status": 1,
        "msg":"成功失败信息",
        "data": [
            {"site_id": "1", "site_name": "u54c8u5c14u6ee8"}
        ]
    }
})

html

<div class="box">
    <ul v-if="status==1">
        <li v-for="item in data">
            {{item.site_id}}-{{item.site_name}}
        </li>
    </ul>
    <div class="tips" v-else>
        {{msg}}
    </div>
</div>