vue基础

最新推荐文章于 2022-05-30 10:13:25 发布

楠北

最新推荐文章于 2022-05-30 10:13:25 发布

阅读量124

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45768482/article/details/123674403

版权

1. 品牌管理案例
实现功能：
1. 添加新品牌

2. 删除品牌

3.修改品牌

4. 根据条件筛选品牌

步骤：
1．1、搭建项目的基本界面的结构
引入bootstrap
引入vue
1.2、实现表格的渲染
使用v-for进行表单的渲染

注意设置key属性

1.3、实现新增的功能
数据绑定，为了能在后面拿到这数据。

定义一个方法，给按钮添加一个事件。

点击这个按钮之后为什么会进行页面的刷新，因为这个按钮是定义在表单里的，所以点击这个按钮会触发表单的提交，这个时候可以组织按钮的默认事件。

绑定事件的方法可以加括号也可以不加，加上括号之后可以给这个方法传递参数。

//添加
addCar() {
// 判断是否为空
if (this.id && this.name) {
//判断ID是否重复
if (this.carList.some((item) => {
return item.id == this.id
})) {
alert("ID重复");
// 清空数据
this.id = ''
this.name = ''
} else {
this.carList.push({
// 获取id和name
// 添加到carlist
id: this.id,
name: this.name,
ctime: new Date()
});
// 清空数据
this.id = ''
this.name = ''
}
} else {
alert("数据为空")
}
},
1.4、实现删除的功能
获取删除元素的索引
要想获取索引，需要先获取id，这个id可以传在调用方法的时候传进
根据id获取索引
遍历的方式
通过es6提供的some方法
调用数组的方法进行删除
使用数组的splice方法
deleteCar(id) {
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
// 参数1 开始位置参数二是删除个数

//拿到位置，删除一个
// this.carList.splice(index,1)
// 根据id拿到位置
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

this.carList.splice(this.carList.findIndex((item) => {
return item.id == id
}), 1)
},
1.5、实现修改的功能
amendCar(name) {

ietm.name == this.reviseName
},
1.6、实现查询的功能
getCarList() {

// 处理看一下包含关键字的汽车
return this.carList.filter((item) => {
// return true
// return item.name.search(this.keyWord) != -1
return item.name.includes(this.keyWord)
})
}
},
1.7、完整代码
<!DOCTYPE html>
<html>

</div>
</div>

<table class="table table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>CTime</th>
<th>Delete</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in getCarList()">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td> {{item.ctime | moment('YYYY-MM-DD hh:mm:ss') }}</td>
<td><button class="btn" data-toggle="modal" data-target="#myModal" @click="amendCar(item)">修改Name</button></td>
<td><button class="btn" data-toggle="modal" data-target="#myModal1" @click="deleteCar(item.id)">删除</button>



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="text" v-model="reviseName">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="Gai">提交更改</button>
</div>
</div>

</div>

</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="del">确认删除</button>
</div>
</div>

</div>

</div>
</td>
</tr>
</tbody>
</table>

</div>

//修改
amendCar(item) {
// this.carList.findIndex((item) => {
// console.log(item.name);
// return item.name.replace(item.name, this.reviseName)
// return item.name == this.reviseName;
// });
var Gai = document.getElementById("Gai");
console.log(Gai);
Gai.onclick = () => {
item.name = this.reviseName
}
// ietm.name == this.reviseName
},
//搜索
getCarList() {
// 处理看一下包含关键字的汽车
return this.carList.filter((item) => {
return item.name.includes(this.keyWord)
})
},
}
})
</script>
</body>

</html>

楠北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

1. 品牌管理案例实现功能：1. 添加新品牌2. 删除品牌3.修改品牌4. 根据条件筛选品牌步骤：1．1、搭建项目的基本界面的结构引入bootstrap引入vue1.2、实现表格的渲染使用v-for进行表单的渲染注意设置key属性1.3、实现新增的功能数据绑定，为了能在后面拿到这数据。定义一个方法，给按钮添加一个事件。点击这个按钮之后为什么会进行页面的刷新，因为这个按钮是定义在表单里的，所以点击这个按钮会触发表单的提交，这个时候可以组织按钮的默认事件。绑定
复制链接

扫一扫