本文展示了如何使用Vue.js创建一个静态页面，包括添加、删除和搜索功能。页面包含一个表单用于添加车牌信息，表单数据与Vue实例的数据属性动态绑定。添加功能会检查输入的ID是否重复，搜索功能实时过滤表格内容。此外，还介绍了日期格式化和自定义事件绑定。
品牌案例（实例）
书写步骤：
1、书写静态页面 该页面可以使用BS 先引入再使用
2、分析数据，看哪些数据需要写死哪些需要定义在data里面
3、绑定相应事件，完成操作
静态页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
<!-- 引入BS样式，不用动画，不需要引入jQuery -->
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<!-- 上半部分 添加 搜索 -->
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">车牌</h3>
</div>
<div class="panel-body">
<form action="" method="post" class="form-inline" role="form">
<div class="form-group">
<label for="">Id:</label>
<input type="email" class="form-control" name="" id="" v-model:value="id">
</div>
<div class="form-group">
<label for="">name:</label>
<input type="email" class="form-control" name="" id="" v-model:value="name">
</div>
<button type="button" class="btn btn-primary" @click="addCar">添加</button>
<div class="form-group">
<label for="">搜索名称关键字</label>
<input type="email" class="form-control" name="" id="" v-model:value="search"
@keyup="changeSearch">
</div>
</form>
</div>
</div>
<!-- 下半部分表单 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- item是数组中的每一项，index是索引 -->
<!-- <tr v-for="(item,index) in carList" :key="item.id"> -->
<!-- 用v-for遍历搜索车列表 key是唯一标识符 id唯一 -->
<tr v-for="(item,index) in searchCarList()" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<button type="button" class="btn btn-primary" @click="deleteCar(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
script（完整代码）
<script>
const vm = new Vue({
el: '#app',
data: {
carList: [
{ id: 1, name: "奔驰", time: new Date() },
{ id: 2, name: "宝马", time: new Date() },
],
id: "",
name: "",
search: "",
},
methods: {
// 添加数组元素
addCar() {
// 判断数组中是否有将要添加的id id值是唯一的
// 设置标志位
let flag = true;
for (let i = 0; i < this.carList.length; i++) {
// 输入的id与数组内的id比较
if (this.id == this.carList[i].id) {
// 说明有重复的
flag = false;
break;
}
}
if (flag) {
// 构建对象有id name time
let obj1 = {
id: this.id,
name: this.name,
time: new Date()
}
// 加入数组
this.carList.push(obj1);
this.id = "";
this.name = "";
} else {
alert("输入的id重复")
}
},
// 日期格式化
dateFormat(fmt) {
// fmt="YYYY-MM-DD hh:mm:ss"
let date = new Date();
let Y = date.getFullYear();
let M = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
// padStart(2,0) 是字符串提供的方法，所以我们先要保证调用的地方是个字符串
// 方法中的两个参数(显示的位数，位数不足时在前面补充的内容)
// padEnd() 位数不足时在后面补充内容
let D = date.getDate().toString().padStart(2, 0);
let h = date.getHours().toString().padStart(2, 0);
let m = date.getMinutes().toString().padStart(2, 0);
let s = date.getSeconds().toString().padStart(2, 0);
// return `${Y}/${M}/${D} ${h}:${m}:${s}`;
// "2021-06-22 hh:mm:ss"
return fmt.replace("YYYY", Y)
.replace("MM", M)
.replace("DD", D)
.replace("hh", h)
.replace("mm", m)
.replace("ss", s)
},
// 删除内容
deleteCar(id) {
// 首先拿到点击按钮对应的id
// console.log(id);
// 根据id找到对应下标
// let index = this.carList.findIndex((item) => {
// return item.id == id;
// });
// 根据下标删除对应元素
// this.carList.splice(index, 1);
this.carList.splice(
this.carList.findIndex((item) => {
return item.id == id;
}), 1
);
},
changeSearch() {
console.log(1);
},
// 返回搜索车列表
searchCarList() {
// 遍历carList数组
return this.carList.filter((item) => {
// 判断输入的字符串search在carList中是否存在在item的name中，存在则在页面中显示对应的内容
// search为空时显示全部内容
return item.name.includes(this.search);
});
},
},
});
</script>添加数组元素方法：
addCar() {
// 判断数组中是否有将要添加的id id值是唯一的
// 设置标志位
let flag = true;
//遍历数组
for (let i = 0; i < this.carList.length; i++) {
// 输入的id与数组内的id比较
if (this.id == this.carList[i].id) {
// 说明有重复的
flag = false;
break;
}
}
if (flag) {
// 构建对象有id name time
let obj1 = {
id: this.id,
name: this.name,
time: new Date()
}
// 加入数组
this.carList.push(obj1);
this.id = "";
this.name = "";
} else {
alert("输入的id重复")
}
},日期格式化：
dateFormat(fmt) {
// fmt="YYYY-MM-DD hh:mm:ss"
let date = new Date();
let Y = date.getFullYear();
let M = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
// padStart(2,0) 是字符串提供的方法，所以我们先要保证调用的地方是个字符串
// 方法中的两个参数(显示的位数，位数不足时在前面补充的内容)
// padEnd() 位数不足时在后面补充内容
let D = date.getDate().toString().padStart(2, 0);
let h = date.getHours().toString().padStart(2, 0);
let m = date.getMinutes().toString().padStart(2, 0);
let s = date.getSeconds().toString().padStart(2, 0);
// return `${Y}/${M}/${D} ${h}:${m}:${s}`;
// "2021-06-22 hh:mm:ss"
return fmt.replace("YYYY", Y)
.replace("MM", M)
.replace("DD", D)
.replace("hh", h)
.replace("mm", m)
.replace("ss", s)
},删除内容：
deleteCar(id) {
// 首先拿到点击按钮对应的id
// console.log(id);
// 根据id找到对应下标
// let index = this.carList.findIndex((item) => {
// return item.id == id;
// });
// 根据下标删除对应元素
// this.carList.splice(index, 1);
this.carList.splice(
this.carList.findIndex((item) => {
return item.id == id;
}), 1
);
},搜索部分：
changeSearch() {
console.log(1);
},
// 返回搜索车列表
searchCarList() {
// return this.carList
// 遍历carList数组
return this.carList.filter((item) => {
// 判断输入的字符串search在carList中是否存在在item的name中，存在则在页面中显示对应的内容
// search为空时显示全部内容
return item.name.includes(this.search);
});
},过滤器
- 过滤器可以用在两个地方：{{ }}插值和v-bind表达式
- 使用语法
-
{{变量 | 过滤器名}}
-
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
-
- 定义语法
- 全局定义
-
通过Vue提供的filter方法定义：Vue.filter(过滤器名，过滤器执行函数function（data，format） return 最终显示内容})
- data 是被过滤数据 format是过滤器被调用时传递参数
- 参数：过滤器的名字或过滤器执行函数
-
- 私有定义
-
filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器
-
- 全局定义
注意：
-
函数的第一个参数都是data，也就是我们要过滤的值。
-
过滤器可以自定义一些参数。
-
过滤器函数的返回值就是最终显示的值
键盘修饰符
- 注册一个监听按键事件
-
监听所有按键：v-on:keyup
-
监听指定按键：v-on:keyup.按键码
-
使用按键别名
vue提供的按键别名
-
.enter
-
.tab
-
.delete (捕获“删除”和“退格”键)
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
-
自定义指令
-
全局定义：Vue.directive()
-
参数：
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
-
bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
-
inserted 这个元素已经渲染到界面上之后执行
-
update 当元素有更新的时候执行
-
这三个方法的参数有哪些
-
el：指令所绑定的元素，可以用来直接操作 DOM 。
-
binding：一个对象，包含以下属性：
-
name：指令名，不包括 v- 前缀。
-
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
-
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用
-
-
-
-
- 私有定义
-
实例里有个directives属性，这个属性是个对象
-
里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
-
简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。
-
补充：
- padStart(2,0) 是字符串提供的方法，所以我们先要保证调用的地方是个字符串
- 方法中的两个参数(显示的位数，位数不足时在前面补充的内容)
- padEnd() 位数不足时在后面补充内容
扫一扫
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
