<body>
<div id="app">
<div class="add">
编号:<input type="text" v-model="newId" v-myfocus="newId">
品牌名称:<input type="text" v-model="newName" @keyDown.enter="addData">
<input type="button" value="添加" @click="addData">
</div>
<div class="add">
品牌名称:<input type="text" placeholder="请输入搜索条件">
</div>
<div>
<table class="tb">
<tr>
<th v-mycolor="color">编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<button @click="delData(index)" v-mycolor="color">删除</button>
</td>
</tr>
<!-- <tr>
<td colspan="4">没有品牌数据</td>
</tr> -->
<!-- 动态生成内容tr -->
</table>
</div>
</div>
</body>
<script>
// 利用Vue.directive()创建全局自定义指令，该方法有两个参数：一个自定义指令名称，一个是配置项(这里面主要包含一些和自定义指令执行相关的函数)
// 1. 自定义指令名称 不带v-， 建议全部小写
Vue.directive('myfocus', {
// bind表示这个自定义指令一绑定到dom上，就开始自动执行
bind(el,binding) {
console.log('bind');
},
// 表示dom插入到页面上的时候自动执行
// 这些函数都有两个参数，一个是el(使用自定义指令的元素), 一个是binding(记录自定义指令信息的对象)
inserted(el, binding) {
console.log('inserted');
console.log(el);
console.log(binding);
el.focus()
},
// 表示自定义指令后面的值更新的时候，自动执行
update() {
console.log('update');
}
})
// 创建一个自定义指令v-mycolor设置字体颜色
Vue.directive('mycolor', {
inserted(el, binding) {
// binding.value获取到的是传递到自定义指令中属性的值
el.style.color = binding.value
}
})
let vm = new Vue({
el: '#app',
data: {
color: 'red',
newId: '', // 获取编号框中的值
newName: '', // 获取品牌名称框中的值
list: [
{id: 33, name: 'LV', ctime: new Date()},
{id: 44, name: 'CC', ctime: new Date()},
{id: 55, name: 'NIKE', ctime: new Date()},
{id: 66, name: 'YSL', ctime: new Date()},
]
},
methods: {
delData(idx) {
this.list.splice(idx, 1)
},
addData() {
this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
// 添加完之后，给两个框清空
this.newId = ''
this.newName = ''
}
}
})
</script>