<!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>