<!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" v-focus> <input type="button" value="添加" @click="addItem()"> </div> <div class="add"> <input type="text" placeholder="请输入你想输入的名称"> </div> <div> <table class="tb"> <tr> <th>编号</th> <th>品牌名称</th> <th>创立时间</th> <th>操作</th> </tr> <tr v-for="(v,i) in list"> <td>{{i+1}}</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> //日期格式处理 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') }) new Vue({ //v-on里面的methods方法 el: '#abc', //模板ajax返回的数据 data: { msg: '我是歌谣', //等同于list:list list, itemname: '' }, //局部自定义指令 directives: { focus: { inserted(el) { el.focus(); } } }, methods: { addItem() { this.list.unshift({ name: this.itemname, date: new Date() }) }, deleteItem(index) { if (confirm("sure?")) { this.list.splice(index, 1) } } } }) </script> <!-- 列表渲染 --> <!-- 1渲染数组 --> <!-- 2c处理无数据的时候 --> </body> </html>
