学习了vue.js入门，用所学尝试做一做
效果：
目录
前提
首先创建项目目录：
准备一个文件夹lib，里面放入我们需要导入的vue.js和bootstrap.css
在html中先完成css等布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核酸检测案例</title>
<!-- 引入样式-->
<link rel="stylesheet" href="../lib/bootstrap.css">
<link rel="stylesheet" href="./brandlist.css">
<link href="../image/favicon.ico" rel="shortcut icon">
<!-- 引入vue.js-->
<script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<!-- 卡片区域 -->
<div class="card">
<div class="card-header">
添加核酸人员
</div>
<div class="card-body">
<!-- 添加核酸人员的表单区域 -->
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">人员名称</div>
</div>
<input type="text" class="form-control" placeholder="请输入核酸人员名称">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">添加</button>
</div>
</div>
</form>
</div>
</div>
<!-- 表格区域 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">名字</th>
<th scope="col">状态</th>
<th scope="col">核酸时间</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">未做核酸</label>
</div>
</td>
<td>2022-02-02 11:34:07</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>body {
padding: 15px;
user-select: none;
}完成之后开始编译。
步骤
1.0 循环渲染表格行的数据
1.0.1 打开 '核酸检测案例.js' 进行编译：
const vm = new Vue({
el: '#app',
data: {
// 列表信息数据
list: [
{ id: 1,name: '张三',status: true,time: new Date()},
{ id: 2,name: '李四',status: false,time: new Date()},
{ id: 3,name: '王五',status: true,time: new Date()},
]
},
methods: {
},
})1.0.2 将js文件导入到html中：
<script src="./核酸检测案例.js"></script>1.0.3 在<tbody>里使用 'v-for' 循环渲染
<tr v-for="(item,index) in list" :key="item.id">
<td>{{ index + 1}}</td>
<td>{{ item.name }}</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="'customSwitch1">未做核酸</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
</tbody>1.0.4 设置状态开关，进行双向绑定，可选值为 '未做核酸' & '已做核酸'，并且使用 'v-if' 进行判断，之后动态生成 checkbox 的 id 属性值
<input type="checkbox" class="custom-control-input" :id="'customSwitch'+item.id" v-model="item.status">
<label class="custom-control-label" :for="'customSwitch'+item.id" v-if="item.status">已做核酸</label>
<label class="custom-control-label" :for="'customSwitch'+item.id" v-else>未做核酸</label>2.0 实现删除对应信息的功能
2.0.1 给删除绑定点击删除事件
<a href="javascript:;" @click="remove(item.id)">删除</a>在 '核酸检测案例.js' 中创建 remove 删除方法
methods: {
// 删除对应的核酸信息
remove(id) {
// console.log(this.list)
// 过滤出 id 对应的品牌信息,并进行删除（es6 filter() 数组过滤方法）
this.list = this.list.filter(item => item.id !== id)
},
},3.0 实现添加信息的功能
3.0.1 点击 ‘添加’ 获取和双向绑定文本内容并且去除首尾空格
<input type="text" class="form-control" placeholder="请输入核酸人员名称" v-model.trim="brand">3.0.2 阻止点击 ‘添加’ 后页面自动刷新（阻止表单自动提交事件），并且触发 'add' 添加事件
<form @submit.prevent="add">3.0.3 在 '核酸检测案例.js' 中创建 add 添加方法（和 remove 删除方法平级，放在 methods里），
并且判断输入是否为空，为空则 return 出去并弹出警告窗
// 添加核酸人员信息
add() {
// console.log(this.brand)
// 判断输入是否为空
if(this.brand === '') return alert('请输入核酸人员名称')
},3.0.4 添加数据
1. 先把要添加的信息对象，整理出来
2. 在 add 方法中，向数组 list 尾部添加数据（使用 push() 方法）
3. 触发 add 方法后，提高用户体验，将清空输入框中的内容
4. 为了使添加之后的信息 id 为上一个值 +1，在 data 中定义一个 nextId 并在 add 方法触发后 自动加一赋值
// 添加核酸人员信息
add() {
// console.log(this.brand)
// 判断输入是否为空
if(this.brand === '') return alert('请输入核酸人员名称')
// 输入不为空,添加对象
// 获取对象
const obj = {
id: this.nextId,
name: this.brand,
status: false,
time: new Date(),
}
// 添加对象放入表单(push()方法)
this.list.push(obj)
// 清空输入框
this.brand=''
// 下一个id加一
this.nextId++
},至此，该项目主要功能已经实现!
4.0 时间格式化（过滤器）
项目里时间的值都是 new Date() 得出的，我们需要将时间格式化，改成xxxx年xx月xx日 xx时xx分xx秒。
打开 html 文件，找到显示时间的元素，使用 ' | ' 绑定一个 dateFormat 过滤器
<td>{{ item.time | dateFormat}}</td>之后在全局定义 dateFormat 过滤器函数
// 声明格式化时间的全局过滤器
Vue.filter('dateFormat',function (time) {
// 格式化处理
var date = new Date(time*1);
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var mm = date.getMinutes();
var s = date.getSeconds();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
h = h < 10 ? "0" + h : h;
mm = mm < 10 ? "0" + mm : mm;
s = s < 10 ? "0" + s : s;
date = y + "年" + m + "月" + d + "日 " + h + "时" + mm + "分" + s +"秒";
console.log(date);
return date
})总结
该小项目复习了 Vue.js
内容包括：
1. 插值 {{}}
2. 双向绑定 'v-model'
3. 'v-model' 的修饰符
4. 属性绑定指令 'v-bind:' &简写 ':'
5. 事件绑定 'v-on' &简写 '@'
6. 事件修饰符 '.prevent' & '.stop'
7. 条件渲染指令 'v-if' & 'v-show'
8. 循环渲染指令 'v-for'
9. 过滤器的基本使用
10. 私有过滤器和全局过滤器
5148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
