/
015-vue-resource改造品牌列表实例.html
138 lines (124 loc) · 4.64 KB
/
015-vue-resource改造品牌列表实例.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset='utf-8'>
<title></title>
<!-- 引入vue.js -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 引入vue-resource -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<div id='app'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<!-- 表格 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dataFormat}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
// 定义全局过滤器
// Vue.filter('过滤器名称',function(){})
Vue.filter('dataFormat',function(datastr,pattern=''){
let data = new Date(datastr)
let year = data.getFullYear()
let month = data.getMonth() + 1;
let day = data.getDate()
let hour = data.getHours()
let minute = data.getMinutes()
let second = data.getSeconds()
// return year + '-' + month + '-' + day
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${year}-${month}-${day}`
}else{
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
})
Vue.http.options.root = "http://mycode.com/"
Vue.http.options.emulateJSON = true
// 实例化vue对象
let vm = new Vue({
// 绑定对象
el:'#app',
data:{
name:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add(){ //添加方法
console.log("添加方法")
if(this.name == ''){
alert("请填写name")
return
}
this.$http.post("vuejs/phpcode/post.php",{name:this.name}).then(res=>{
if(res.status !== 0){
this.getAllList()
}else{
alert("出错了")
}
})
this.name = ''
},
getAllList(){
this.$http.get("vuejs/phpcode/get.php").then(res=>{
console.log(res)
if(res.status !== 0){
this.list = res.body.message
}else{
alert("获取数据失败!")
}
})
},
del(id){
this.$http.get("vuejs/phpcode/del.php?id="+id).then(res=>{
console.log(res)
if(res.status !== 0){
this.getAllList()
}else{
alert("失败了!")
}
})
},
},
created() {
this.getAllList()
},
})
</script>
</html>