#app{
width:600px;
margin:10px auto;
}
.tb{
border-collapse:collapse;
width: 100%;
}
.tb th{
background-color: #0094ff;
color:white;
}
.tb td,.tb th{
padding:5px;
border:1px solid black;
text-align: center;
}
.add{
padding: 5px;
border:1px solid black;
margin-bottom: 10px;
}
编号:
品牌名称:
品牌名称:
编号 | 品牌名称 | 创立时间 | 操作 |
---|---|---|---|
{{item.id}} | {{item.name}} | {{item.ctime}} | 删除 |
没有品牌数据 |
let vm = new Vue({
el: '#app',
data: {
newId: '',
newName: '',
list: [],
searchName: '' //获取搜索的名字
},
methods: {
// 添加数据
addData() {
let url = 'http://list'
axios.post(url, {id: this.newId, name: this.newName, ctime: new Date()})
.then(res => {
// console.log(res);
if(res.status === 201) {
// 重新刷新一下列表数据
this.getList()
}
})
},
// 获取列表数据方法
getList() {
let url = 'http://19st'
// 调用axios的get方法,获取数据
axios.get(url)
.then(res => {
console.log(res);
// 将获取回来的数据赋值给list
this.list = res.data
})
.catch(err => {
console.log(err);
})
},
// 搜索方法
search() {
let url = 'http://1list'
axios.get(url,{params: {name: this.searchName}})
.then(res => {
if (res.status === 200) {
this.list = res.data
this.searchName = ''
}
})
},
// 删除方法
deleteData(id) {
let url = `http://19list/${id}`
axios.delete(url)
.then(res => {
this.getList()
})
}
},
mounted () {
this.getList()
}
})