<!DOCTYPE html> <html lang="zh-CN"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><!--vue.min.js的库--> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--jQuery库--> </head> <body> <div id="main"> <div v-for="item in rows"> <p>姓名:{{item.name}}</p> <p>昵称:{{item.nick}}</p> </div> </div> </body> <script> $(document).ready(function () { $.getJSON("data.json", function (result, status) { var v = new Vue({ el: '#main', data: { rows: result } }) }); }); </script> </html>
test.json
[ { "name": "王小婷", "nick": "祈澈菇凉" }, { "name": "安安", "nick": "坏兔子" }, { "name": "编程微刊", "nick": "简书" } ]
