axios如何往HTML添加数据,axios获取数据 增删改查

#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()

}

})