老马黑科技html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading ">
<h2 class="panel-title">添加品牌</h2>
</div>
<label class="panel-body form-inline">
ID：
<input type="text" v-model="id">
</label>
<label>
Name：
<input type="text" v-model="name">
</label>
<label>
<input type="button" value="添加品牌" class="form-control" @click="add">
</label>
</div>
<table class="table table-striped table-bordered ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Opreation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime }}</td>
<td>
<input type="button" value="删除" class=" btn btn-primary btn-info">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{
id:1,name:'奔驰',ctime:new Date()
},
{
id:2,name:'宝马',ctime:new Date()
}]
},
created:function () {
this.getAllList();
},
methods:{
add:function () {
},
getAllList:function () {
//分析：
/* 1、由于已经导入了resource这个包，所以，可以直接通过 this.$http 来发起数据请求
2、this.$http.get('url').then(function () {})
3、当通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回的result（我这里用的本地）
4、先判断result.status是否等于0，如果等于0，就成功了，可以把result.message赋值给 this.list;
如果不等于0，可以弹框提醒，获取数据失败；*/
this.$http.get('./data.json').then(function (result) {
var result = result.body;
if(result.status === 0){
this.list = result.message;
}else{
alert('获取数据失败了')
}
})
}
}
});
</script>
</body>
</html>
data.json
{
"status":0,
"message":[
{
"id":1,
"name":"三菱",
"ctime":"2017-02-03"
},
{
"id":2,
"name":"保时捷",
"ctime":"2017-02-03"
},
{
"id":3,
"name":"劳斯莱斯",
"ctime":"2017-02-03"
},
{
"id":4,
"name":"德克萨斯",
"ctime":"2017-02-03"
}
]
}
