1 根据关键字实现数组的过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css3.3.7/bootstrap.css"/>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
id: <input type="text" class="form-control" v-model="id"/>
</label>
<label for="">
name: <input type="text" v-model="name" />
</label>
<!--在Vue中，使用事件绑定机制，为元素指定处理函数，
如果加了小括号，就可以传参
-->
<input type="button"
value="添加" class="btn-primary" @click="add()"/>
<input type="text" v-model="keyword"/>
</div>
</div>
<table border="" cellspacing="" cellpadding="" class="table table-bordered table-hover table-striped">
<thead>
<tr><th>id</th>
<th>name</th>
<th>time</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<!--之前 v-for中的数据，都是直接从data上的list中直接渲染的-->
<!--现在，我们自定义serarch方法，通过传参形式传递给serarch-->
<!--在serarch方法内部通过执行for 循环，把符合的返回-->
<tr v-for="item in serarch(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td><a href="" @click.prevent="dele(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm=new Vue({
el:‘#app‘,
data:{
id:‘‘,
name:‘‘,
keyword:"",
list:[
{id:1,name:‘灰蒙蒙1‘,ctime:new Date()},
{id:2,name:‘宝‘,ctime:new Date()},
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name,
ctime:new Date()})
this.id=this.name=‘‘
},
dele(id){//根据id 找到并删除数据
// this.list.some((item,i)=>{
// this.list.splice(i,1)
// if(item.id==id){return true}
// }
// )
var index= this.list.findIndex(item=>{
if(item.id==id){
return true
}
})
this.list.splice(index,1)
},
serarch(keyword){
// var newList=[]
// this.list.forEach(item=>{
// if(item.name.indexOf(keyword)!=-1){
// newList.push(item)
// }
//
// })
// return newList
// 注意：forEach some filter findIndex这些都属于数组的新方法
// 都会对数组的每次进行遍历执行相关的操作
return this.list.filter(item=>{
// 注意：Es6中，为字符串提供了一个新方法，叫做
// String:prototype.includes(‘要包含的字符串‘)
// 如果包含，则返回 true,反之
if(item.name.includes(keyword)){
return item
}
})
}
}
})
</script>
</body>
</html>
--筛选过滤
2 全局过滤器使用
// 过滤器定义语法
// Vue.filter(‘过滤器名‘,function(){})
// 过滤器中的function，第一个参数，已经被规定死了，
// 永远都是过滤器管道符传递过来的数据
Vue.filter(‘过滤器名‘,function(data){
return data+‘123‘
})
</script>
</body>
</html>
<!--过滤器调用时候的格式 {{name | 过滤器名}}-->
--过滤器定义
<body>
<div id="app">
<p>{{msg | msgFormat(‘疯狂‘)}}</p>
</div>
<script type="text/javascript">
Vue.filter(‘msgFormat‘,function(data,arg){
// 字符串的 replace 方法，第一个参数，除了可写一个字符之外，
// 还可以定义一个正则
return data.replace(/单纯/g,arg)
})
var vm=new Vue({
el:"#app",
data:{
msg:‘曾经，我也是一个单纯的少年,单纯的我也一直很单纯‘
}
})
</script>
</body>
--传参过滤器定义
自定义私有过滤器
调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，
优先调用私有过滤器
3 Es6 方法 padStart 方法
var m =(dt.getMonth()+1).toString().padStart(2,‘0‘)
4 按键修饰符（按键事件）
参考官方文档 https://cn.vuejs.org/v2/guide/events#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
也可以输入键码值 @keyup.113="add"
原文地址：https://www.cnblogs.com/Skyda/p/10225533.html
时间： 2024-12-11 02:19:23