<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 数据渲染界面 -->
<!-- 绑定表单元素 -->
<div id="abc">
<div class="add">
<input type="text" v-model="itemname">
<!-- 控制长度为0的时候不能点击 -->
<input :disabled="itemname.length==0" type="button" value="添加" @click="addItem()">
</div>
<div class="add">
<input type="text" placeholder="请输入你想输入的名称" v-model="searchVal">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(v,i) in list">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.date|fmtDate}}</td>
<td>
<a href="#" @click.prevent="deleteItem(v.id)">删除</a>
</td>
</tr>
<tr v-if="list.length===0">
<td colspan="4">没有品牌数据</td>
</tr>
</table>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/moment.js"></script>
<script src="./js/axios.js">
</script>
<script>
//日期格式处理
/*
var list = [{
name: 'TCL',
date: new Date()
}, {
name: 'xx00',
date: new Date()
}, {
name: 'TCL',
date: new Date()
},
]; */
Vue.filter('fmtDate', (v) => {
//moment
return moment(v).format('YYYY-MM-DD hh:mm:ss')
})
/* axios.get().then((res)=>{this.list=res.data}) */
new Vue({
//v-on里面的methods方法
el: '#abc',
//模板ajax返回的数据
data: {
msg: '我是歌谣',
//等同于list:list
list: [],
itemname: '',
searchVal: '',
},
watch: {
searchVal(newV, oldV) {
axios
.get('http://localhost:8888/brands?name_like=' + newV)
.then((res) => {
this.list = res.data
})
}
},
//计算属性
computed: {
newlist() {
//返回一个数组筛选后的结果
//判断数据是否一样
//filter:用来过滤数组的
/* return this.list.filter((item) => {
return item.name.startsWith(this.searchVal);
}) */
/* return arr */
}
},
mounted() {
this.getAllBrands();
},
methods: {
getAllBrands() {
axios
.get('http://localhost:8888/brands')
.then((res) => {
/* console.log(res); */
const {
status,
data
} = res
if (status === 200) {
this.list = data
}
})
},
addItem() {
/* this.list.unshift({
name: this.itemname,
date: new Date()
}) */
axios
.post('http://localhost:8888/brands', {
name: this.itemname,
date: new Date()
})
.then((res) => {
const {
status
} = res
if (status === 201) {
this.getAllBrands();
}
})
},
deleteItem(ID) {
/* if (confirm("sure?")) {
this.list.splice(index, 1)
} */
axios.delete('http://localhost:8888/brands/' + ID)
.then((res) => {
console.log(res.status);
this.getAllBrands();
})
}
}
})
</script>
<!-- <script>
var arr = [1, 2, 3].filter((item) => {
return item > 1
})
console.log(arr);
</script> -->
<!-- 列表渲染 -->
<!-- 1渲染数组 -->
<!-- 2c处理无数据的时候 -->
</body>
</html>
