<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue-读取/发送数据</title> <style type="text/css"> * { margin: 0; padding: 0 } table, td { border: 1px solid #cccccc; border-collapse: collapse; } table { width: 1090px; margin: 20px auto; } tr { line-height: 30px; } td { text-align: center; } .demo_input { width: 500px; height: 500px; border: 1px solid red; margin: 0 auto; text-align: center; } .demo_input input { width: 200px; height: 30px; margin: 5px auto; } </style> <script src="js/vue.js"></script> <script src="js/jquery.js"></script> </head> <body> <div id="demo"> <table border="1"> <tr> <th>ID</th> <th>书名</th> <th>作者</th> <th>价格</th> </tr> <tr v-for="books in book"> <td>{{books.id}}</td> <td>{{books.name}}</td> <td>{{books.author}}</td> <td>{{books.price}}</td> </tr> <tr> <td colspan="4"><button v-on:click="showData">点我</button></td> </tr> </table> <hr /> <div class="demo_input"> <p>账号：<input type="text" placeholder="请输入账号" id="name" /></p> <p>密码：<input type="text" placeholder="请输入密码" id="pwd" /></p> <p> <!--<button onclick="login()">登录</button>--> <button v-on:click="login()">登录</button> </p> </div> </div> <script> /*vue结合ajax数据读取*/ var demo = new Vue({ el: '#demo', data: { book: '', }, mounted: function() { var _self = this; $.ajax({ type: "get", url: "vue.json", dataType: "json", success: function(data) { _self.book = data.books; console.log(_self.book) } }); }, methods: { showData: function() { var _self = this; $.ajax({ type: "get", url: "vue.json", dataType: "json", success: function(data) { _self.book = data.books; console.log(_self.book) } }); }, login: function() { $.ajax({ type: "get", url: "aaa.php", data: { "name": $("#name").val(), "pwd": $("#pwd").val(), }, dataType: "text", success: function() { console.log("成功了") } }); } } }) </script> </body> </html>