night-prince

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
vue过滤器和修饰符

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>

<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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="./vue-2.4.0.js"></script>
<script src="./jquery-1.11.1.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body>
<div id='app'>

<div class="panel panel-info">
<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 v-model="id" type="text" class="form-control" id="" placeholder="">
</div>
<div class="form-group">
<label class="" for="">Name</label>
<input v-model="name" type="text" class="form-control" id="" placeholder="">
</div>

<button type="submit" class="btn btn-primary" @click.prevent="addCar">添加</button>
<div class="form-group">
<label class="" for="">搜索</label>
<input v-model="keyWord" type="text" class="form-control" id="" placeholder="">
</div>
</form>

</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>
<!-- 按钮触发模态框 -->
<!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> -->
<!-- 模态框（Modal） -->
<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">&times;</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>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</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">&times;</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="del">确认删除</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</td>
</tr>
</tbody>
</table>

</div>

<script>
Vue.filter("moment", function(data, format) {
// 获取时间
let Y = data.getFullYear()
let M = (data.getMonth() + 1).toString().padStart(2, 0)
let D = (data.getDate()).toString().padStart(2, 0)
let H = (data.getHours()).toString().padStart(2, 0)
let Mi = (data.getMinutes()).toString().padStart(2, 0)
let S = (data.getSeconds()).toString().padStart(2, 0)
return format.replace("YYYY", Y).replace("MM", M).replace("DD", D).replace("hh", H).replace("mm", Mi).replace("ss", S)
})
const vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keyWord: '',
reviseName: '',
carList: [{
id: 1,
name: '宝马',
ctime: new Date()
}, {
id: 2,
name: '奔驰',
ctime: new Date()
}]
},
methods: {
//添加
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("数据为空")
}
},
//删除
/* 第一种方法 */
// deleteCar(index) {
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
// 参数1 开始位置 参数二是删除个数
// this.carList.splice(index, 1)
// },
/* 第二种方法 */
deleteCar(id) {
var del = document.getElementById("del");
console.log(del);
del.onclick = () => {
this.carList.splice(this.carList.findIndex((item) => {
return item.id == id;
}), 1)
}
// console.log(index);
// 根据id拿到位置
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

},

//修改
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>
2、选项卡
<!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>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<ul>
<li v-for="(item,index) in list" @click="changeIndex(index)" > {{item.title}}</li>
</ul>

<ul>
<li v-for="(item,index) in list" v-show='index == cur' >{{item.content}}</li>
</ul>

</div>


<script>
const vm = new Vue({
el: '#app',
data: {
cur:0,
list:[
{id:1,title:'标题1',content:"内容1"},
{id:2,title:'标题2',content:"内容2"},
{id:3,title:'标题3',content:"内容3"},
]
},
methods: {
changeIndex(index){
console.log(index);

this.cur = index
}
},
})
</script>
</body>
</html>
3、样式的使用
3.1、css样式的使用
<!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>
<script src="./vue-2.4.0.js"></script>
<style>
.box {
color: red;
}

.box2 {
color: blue;
}

.box3 {
color: yellow;
}

.fs40 {
font-size: 40px;
}

.red {
color: red;
}

.pink {
color: hotpink;
}
</style>
</head>

<body>
<div id='app'>
<div class="box">哈哈哈</div>
<div :class="box">哈哈哈</div>
<div class="box">哈哈哈</div>
<button @click="changeColor">改变颜色</button>
<!-- 数组 -->
<div :class="['red','fs40']">大红字</div>
<!-- 三目表达式 -->
<div :class="flag?'pink':'fs40'">大红字</div>
<div :class="['red',flag?'pink':'fs40']">大红字1</div>
<!-- 对象 属性值是布尔 -->
<div :class="{pink:flag,fs40:flag}">大红字2</div>
<!-- 数组内置对象 -->
<div :class="['red',{fs40:flag}]">大红字3</div>
</div>

<script>
const vm = new Vue({
el: '#app',
data: {
box: "box2",
flag: true,
},
methods: {
changeColor() {
this.box = "box3"
}
}
})
</script>
</body>

</html>
3.2、style样式的使用
<!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>
<script src="./vue-2.4.0.js"></script>
<style>
.box {
color: red;
}

.box2 {
color: blue;
}

.box3 {
color: yellow;
}

.fs40 {
font-size: 40px;
}

.red {
color: red;
}

.pink {
color: hotpink;
}
</style>

</head>

<body>
<div id='app'>
<div style="color: red; font-size: 40px;">今天预报有雨 ！</div>
<!-- 对象 -->
<div :style="style1">今天预报有雨 ！</div>
<!-- 数组里是对象 -->
<div :style="[style2,style3]">今天预报有雨 ！</div>
<!-- 绑定方法，拿返回值 -->
<div :style="getColor()">今天预报有雨 ！</div>
<button @click='changeColor'>改变颜色</button>
</div>

<script>
const vm = new Vue({
el: '#app',
data: {
style1: {
color: "red"
},
style2: {
color: 'pink'
},
style3: {
'font-size': '40px'
},
},
methods: {
getColor() {
return {
color: 'red',
'font-size': '40px'
}
},
changeColor() {
this.style1.color = 'blue'
}
}
})
</script>
</body>

</html>
4、键盘修饰符
<!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>
<script src="./vue-2.4.0.js"></script>

</head>

<body>
<div id='app'>
<input type="text" @keyup="up">
<input type="text" @keydown="down">
<!-- enter -->
<input type="text" @keyup.13="up">
<input type="text" @keyup.enter="up">
<!-- tab -->
<input @keyup.tab="up" type="text">
<!-- f5 -->
<input @keyup.116="up" type="text">
<!-- a -->
<input @keyup.a="up" type="text">
</div>

<script>
//自定义按键别名
Vue.config.keyCodes.a = 65


const vm = new Vue({
el: '#app',
data: {},
methods: {
up() {
console.log("up");
},
down() {
console.log("down");
}
}
})
</script>
</body>

</html>
5、过滤器
<!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>
<script src="./vue-2.4.0.js"></script>

</head>

<body>
<div id='app'>
<!--
通过Vue提供的filter方法定义：Vue-filter()
参数：过滤器的名字和过滤器执行函数
-->
圆的半径是{{num}}; 圆的半径是{{num | getM}};

</div>

<script>
// 全局
// 1定义在vue实例化前
// 2通过Vue提供的filter方法定义：Vue.filter(过滤器的名字,过滤器执行函数)
// 参数：过滤器的名字和过滤器执行函数
// 如果使用了过滤器，最终页面显示内容是return的值
// 局部定义
// Vue.filters
Vue.filter("getM", function(data, format) {
return Math.PI * data * data
})
const vm = new Vue({
el: '#app',
data: {
num: 10,
},
methods: {}
})
</script>
</body>

</html>
6、自定义指令
<!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>
<script src="./vue-2.4.0.js"></script>
</head>

<body>
<div id='app'>
<div v-mycolor="'red'">看下我是什么颜色</div>
<div v-mycolor="color">看下我是什么颜色</div>
<input v-mycolor="'green'" type="text" v-model="color" name="" id="">
<input v-myfocus='' type="text">
</div>

<script>
//全局定义
//使用这种方法进行全局定义：Vue.directive()
//局部定义
//使用这种方法进行全局定义：Vue.directives()
Vue.directive('mycolor', {
bind(el, binding) {
el.style.color = binding.value
},
inserted(el) {
console.log(el);
},
update(el) {
console.log(el);
}
})
Vue.directive('myfocus', {
bind(el, binding) {
console.log(el);
},
inserted(el) {
el.focus()
},
update(el) {
console.log(el);
}
})
const vm = new Vue({
el: '#app',
data: {
color: 'green'

},
methods: {}
})
</script>
</body>

</html>

posted on   我带你们飞  阅读(61)  评论(0)  编辑  收藏  举报
相关博文：
· Vue-基础使用
· vue生命周期和vue请求+动画
· Vue过滤器和修饰符
· vue第二天
· vue小案例之品牌列表(后台数据显示)
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae