<!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(i)">删除</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: '', }, //计算属性 computed: { newlist() { //返回一个数组筛选后的结果 //判断数据是否一样 //filter:用来过滤数组的 return this.list.filter((item) => { return item.name.startsWith(this.searchVal); }) } }, 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() }) }, deleteItem(index) { if (confirm("sure?")) { this.list.splice(index, 1) } } } }) </script> <!-- <script> var arr = [1, 2, 3].filter((item) => { return item > 1 }) console.log(arr); </script> --> <!-- 列表渲染 --> <!-- 1渲染数组 --> <!-- 2c处理无数据的时候 --> </body> </html>
