- 需求:1.点击删除按钮删除数据 2.点击添加按钮添加数据
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<style>
#app{
width:600px;
margin:10px auto;
}
.tb{
border-collapse:collapse;
width: 100%;
}
.tb th{
background-color: #0094ff;
color:white;
}
.tb td,.tb th{
padding:5px;
border:1px solid black;
text-align: center;
}
.add{
padding: 5px;
border:1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="add">
<!-- 3.2 使用双向数据绑定获取input框的值 -->
编号:<input type="text" v-model="newId">
品牌名称:<input type="text" v-model="newName" v-myfocus>
<!-- 3.1 绑定事件 -->
<input type="button" value="添加" @click="addData">
</div>
<div class="add">
品牌名称:<input type="text" placeholder="请输入搜索条件">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 1.2 在tr中使用v-for -->
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 2.1 绑定事件,传递删除项的索引 -->
<button @click="deleteData(index)">删除</button>
</td>
</tr>
<!-- 1.3当数组list长度为0时,显示 -->
<tr v-if="list.length === 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!-- 动态生成内容tr -->
</table>
</div>
</div>
</body>
<script>
// 5.1 使用Vue.directive()方法创建全局自定义指令。现在需求,创建一个v-myfocus指令
// 该函数有两个参数
// 1. 自定义指令的名字,不能带v-, 使用全小写
// 2. 一个对象,对象内部有一些配置项
Vue.directive('myfocus', {
// 5.2 这个对象配置项中,有很多方法,重点关注inserted方法,它表示当指令插入到标签中时,自动执行
inserted(el) {
el.focus()
}
})
let vm = new Vue({
el: '#app',
data: {
newId: '',
newName: '',
// 1.1 创建假数据
list: [{
id: 1,
name: 'CC',
ctime: new Date()
},
{
id: 2,
name: 'Nike',
ctime: new Date()
},
{
id: 3,
name: '阿迪',
ctime: new Date()
},
]
},
methods: {
// 2.2 定义删除数据函数
deleteData(idx) {
this.list.splice(idx, 1)
},
// 3.3 使用push方法追加数据
addData() {
this.list.push({
id: this.newId,
name: this.newName,
ctime: new Date()
})
// 3.4 添加完成清空input框
this.newId = ''
this.newName = ''
}
}
})
</script>
</html>
获取数据
- 在 data 中添加
一个名称为list的变量,类型为数组,存放品牌数据的对象,格式为:{id:1,name:‘宝马’,ctime:Date()
}
var vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, title: 'LV', ctime: new Date()},
{id: 2, title: 'CC', ctime: new Date()},
{id: 3, title: 'CK', ctime: new Date()},
]
}
})
- 在table中的“动态生成内容tr”位置使用v-for指令遍历list数组数据生成表格内容行,注意要写:key
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
- 处理 “没有品牌数据” --> 利用:v-if进行判断,当list为空时,才显示没有品牌数据
<tr v-if="list.length==0">
<td colspan="4">没有品牌数据</td>
</tr>
删除
- 监听删除按钮click事件,执行deleteData(),在这个函数中传递数据项的索引
<button @click="deleteData(index)">删除</button>
- 在函数定义时,根据索引,调用splice方法删除
methods:{
// 定义删除数据函数
deleteData(idx) {
this.list.splice(idx, 1)
}
}
添加
- 1.给添加按钮click绑定addData
<input type="button" value="添加" @click="addData">
- 2.用两个v-model和input框进行双向数据绑定,v-model命名不能是一样的
编号:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
品牌名称:<input type="text" v-model="newName" ref="nameRef">
- 直接addData()函数中使用push方法向list数组中追加数据
methods: { // 使用push方法追加数据 addData() { this.list.push({id: this.newId, name: this.newName, ctime: new Date()}) // 添加完成清空input框 this.newId = '' this.newName = '' } }
输入框聚焦自定义指令
- HTML代码
//
编号:<input type="text" v-model="newId" v-myfocus>
品牌名称:<input type="text" v-model="newName" v-myfocus>
- js代码
// 使用Vue.directive()方法创建全局自定义指令。现在需求,创建一个v-myfocus指令
// 该函数有两个参数
// 1. 自定义指令的名字,不能带v-, 使用全小写
// 2. 一个对象,对象内部有一些配置项
Vue.directive('myfocus', {
// 这个对象配置项中,有很多方法,重点关注inserted方法,它表示当指令插入到标签中时,自动执行
inserted(el, binding) {
console.log('指令插入到标签中了');
el.focus()
}
})