Vue 第一章练习 列表的案例
知识点：1、全局过滤器：时间格式化
2、some ，indexOf ,filter等函数使用
3、自定义按键修饰符
@keyup.f2="btnAdd"
Vue.config.keyCodes.f2 = 113
代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div >
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
id:<input type="text" class="form-control" v-model="id">
</label>
<label>
name:<input type="text" class="form-control" v-model="name">
</label>
<!-- 在vue中使用绑定机制，如果加了小括号，可以给函数传参-->
<input type="button" value="添加" class="btn btn-primary" @click="btnAdd">
<input type="text" class="form-control" v-model="keyWords">
<input type="button" value="搜索" class="btn btn-primary" @click="btnSearch">
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>编号</th>
<th>品牌</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keyWords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!--过滤器只能使用到插件表达式-->
<td>{{item.ctime | timeFormat('yyyy-mm-dd hhmmss')}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
<a href="./Model.html">修改</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//<!--全局过滤器只能使用到插件表达式-->
Vue.filter('timeFormat',function (ctime,pattern) {
var dt = new Date(ctime)
var y =dt.getFullYear()
var m = (dt.getMonth()+1).toString().padStart(2,0)
var d = dt.getDate().toString().padStart(2,0)
if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`
}else {
var hh = dt.getHours().toString().padStart(2,0)
var mm = dt.getMinutes().toString().padStart(2,0)
var ss = dt.getSeconds().toString().padStart(2,0)
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
list:[
{id:1,name:"奔驰",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()}
],
id:'',
name:'',
keyWords:'',
},
methods:{
btnAdd(){
this.list.push({id:this.id,name:this.name,ctime:new Date()})
this.id = this.name = ''
},
del(id){//根据id删除数据
//分析：1、如何根据id,找到索引 2、找到索引，通过splice删除
//方法一：some函数，找到指定的数据，然后终止寻找
this.list.some((item,i) => {
if(item.id == id){
this.list.splice(i,1)
return true;
}
})
//方法二：快速找到索引
// this.list.findIndex((item)=>{
// if(item.id == id){
// return true
// }
// })
},
//在search内部方法，通过执行for循环，把符合搜索条件的放在新列表中返回
search(keyWords){
var newList = []
//方法1：forEach
// this.list.forEach(item =>{
// if(item.name.indexOf(keyWords) != -1){
// newList.push(item)
// }
// })
//方法2：filter
this.list.filter(item =>{
console.log("搜索。。。。")
if(item.name.includes(keyWords)){
newList.push(item)
}
})
console.log("newList",newList)
return newList
},
btnSearch(){
this.keyWords
}
}
})
</script>
</body>
</html>
以上是 Vue 第一章练习 列表的案例 的全部内容， 来源链接： utcz.com/z/376185.html
