Vue过滤器和修饰符
品牌管理案例
实现功能：
1. 添加新品牌
2. 删除品牌
3. 根据条件筛选品牌
<!DOCTYPE html>
<html>
<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></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<div class="panel panel-default">
<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 class="" for="">ID:</label>
<input type="text" class="form-control" v-model="carId" placeholder="请输入ID:">
</div>
<div class="form-group">
<label class="" for="">Name:</label>
<input type="text" class="form-control" v-model="carName" placeholder="请输入汽车品牌:">
</div>
<button type="button" class="btn btn-primary" @click="addCar">添加</button>
<div class="form-group">
<label class="" for="">搜索名称关键字：</label>
<input type="text" class="form-control" v-model="keyWord" placeholder="">
</div>
</form>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in filterCarList()" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | timeFormat('YYYY-MM-DD hh:mm:ss')}}</td>
<!-- <td>{{item.ctime | timeFormat('YYYY/MM/DD hh:mm:ss')}}</td> -->
<!-- <td>{{item.ctime | timeFormat('YYYY年MM月DD日 hh:mm:ss')}}</td> -->
<!-- <td>{{item.id}}</td> -->
<td><button class="btn btn-primary btn-danger" data-toggle="modal" :data-target="'#'+item.id">
删除
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" :id="item.id" 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>
<h4 class="modal-title" id="myModalLabel">
删除此选项
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" @click="deleteCar(item.id)" class="btn btn-primary" data-dismiss="modal">
确认删除
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</td>
<td><button class="btn btn-primary btn-warning" data-toggle="modal" :data-target="'#name'+item.id">
修改Name
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" :id="'name'+item.id" 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>
<h4 class="modal-title" id="myModalLabel">
修改Name
</h4>
</div>
<input type="text" class="modal-body" v-model="newName" style="border: none; outline: none;" placeholder="请输入要修改的名字">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" @click="submitModify(item.id)" class="btn btn-primary" data-dismiss="modal">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
carId:"",
carName:"",
keyWord:"",
newName:"",
carList:[
{id:1,name:"宝马",ctime: new Date()},
{id:2,name:"奔驰",ctime: new Date()},
]
},
methods: {
// 添加
addCar(){
// 非空判断
if(this.carId && this.carName){
// 判断ID是否重复
if(this.carList.some((item)=>{
return item.id == this.carId
})){
alert("ID重复")
}else{
this.carList.push({
id:this.carId,
name:this.carName,
ctime:new Date(),
});
}
}else{
alert("你小子瞎啊，看不见没填完啊！！！")
}
},
// 删除 根据id唯一，然后通过findIndex()方法找到索引，然后splice()剪切
deleteCar(id){
console.log(id);
let index = this.carList.findIndex((item)=>{
return item.id == id
})
console.log(index);
this.carList.splice(index,1)
},
// 查询从新数组中返回显示
filterCarList(){
return this.carList.filter((item)=>{
return item.name.includes(this.keyWord)
})
},
submitModify(id){
console.log(id);
let i = this.carList.findIndex((item)=>{
return item.id == id
})
if(this.newName){
this.carList[i].name = this.newName;
}
this.newName = ""
}
},
filters:{
timeFormat(data,format){
// format YYYY-MM-DD hh:mm:ss
let Y = data.getFullYear()
let M = data.getMonth()+1 >10?data.getMonth()+1:"0"+(data.getMonth()+1)
let D = data.getDate().toString().padStart(2,'0')
let h = data.getHours().toString().padStart(2,'0')
let m = data.getMinutes().toString().padStart(2,'0')
let s = data.getSeconds()>10?data.getSeconds():"0"+(data.getSeconds())
return format.replace("YYYY",Y).replace("MM",M).replace("DD",D).replace("hh",h).replace("mm",m).replace("ss",s)
}
},
})
</script>
</body>
</html>
过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
作用：
在我们页面显示值之前加一道过滤，展示过滤后得值
注意事项
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
使用语法
{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
定义语法
全局定义：
<div id="app">
{{num | add1}}
{{num | addm(123)}}
</div>
Vue.filter("add1",function(data,format){
console.log(data); //num
console.log(format); //传的参数
return data+1
})
私有定义
const vm = new Vue({
el: '#app',
data: {
num:18
},
methods: {
},
// 私有定义
filters:{
addm:function(data,format){
console.log(format);
return data+format
}
}
})
键盘修饰符
监听所有按键 @:keyup
监听指定按键 @：keyup.按键码
使用按键别名
vue提供的按键别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
自定义按键别名
Vue.config.keyCodes.f1=112
自定义指令
// bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
// update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
// 指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
<div id='app'>
<p v-color="'blue'">132456</p>
<input v-focus="" type="text">
</div>
全局定义
// Vue.directive("color",{
// bind(el,binding){
// console.log(binding);
// el.style.color = binding.value
// },
// inserted(el){
// console.log(el);
// },
// update(el){
// console.log(el);
// }
// })
私有定义
directives:{
color(el,bindng){
el.style.color=binding.value
},
focus:{
inserted(el) {
el.focus();
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！