YangTao
厌浅尝辄止喜有始有终
E.t's Blog
vue解析JSON渲染页面
vue解析JSON渲染页面

在不停的奋斗中,才会慢慢充实自己,就像一张空白的纸张,渲染出多姿多彩的图画!

最近在了解前后端分离,java作为后端,取消掉JSP页面,直接用vue.js;

下面举个栗子,模拟服务端请求JSON并渲染页面;

  •  JSON代码
[{
	"address": "中国",
	"age": 23,
	"name": "杨涛"
}, {
	"address": "北京",
	"age": 11,
	"name": "小东"
}, {
	"address": "日本",
	"age": 11,
	"name": "空空"
}]
  • HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style>
    .main{
        height: 100px;
        background: #eeeeee;
    }
    [v-cloak] {
    display: none;
    }
    table{
        width: 400px;
        border: 1px solid #d8d8d8;
        text-align: center;
    }
    td{
        border-top: 1px solid #d8d8d8;
    }
    </style>
</head>
<body>  
    
    <!-- 重点❤重点-->
    <div id="vue-app" v-cloak >
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
            </tr>
            <tr v-for="r in rows">
                <td>{{r.name}}</td>
                <td>{{r.age}}</td>
                <td>{{r.address}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="demo1.js"></script>
</html>
  • JS代码
$.getJSON("demo1.json", function (result) {
  var v = new Vue({
    el: '#vue-app',
    data: {
      rows: result
    }
  })
});

为避免在渲染的时候出现闪烁,使用了v-cloak,等待元素渲染完毕后在显示;

没有标签
首页      web      vue      vue解析JSON渲染页面
https://secure.gravatar.com/avatar/77f815bec37eb34e2eef92ae146f899a?s=256&d=mm&r=g

et

文章作者

发表评论

textsms
account_circle
email

E.t's Blog

vue解析JSON渲染页面
在不停的奋斗中,才会慢慢充实自己,就像一张空白的纸张,渲染出多姿多彩的图画! 最近在了解前后端分离,java作为后端,取消掉JSP页面,直接用vue.js; 下面举个栗子,模拟服务端请求JSON并…
扫描二维码继续阅读
2018-11-06