<!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="请输入你想输入的名称">
</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>{{}}</td>
<td>{{v.date|fmtDate}}</td>
<td>
<a href删除</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: ''
},
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>
