vue 02品牌管理案例涉及知识点
1.数组添加
- posh(item1,item2,) 在最后添加一项或多项，并返回数组的长度
- unshift(item1,item2,) 在最前面添加一项或多项，并返回数组的长度
2.数组删除
- pop()删除最后一项并返回删除元素的值
- shift（）删除最前一项并返回删除元素的值
3.修改数组
- splice(start,deleteCount,item1,item2,)
4.数组翻转
- reverse()
5.对数组排序
- sort(function(a,b){return a-b}); a-b升b-a降
6.数组截取
- slice(start,end);返回新数组
7.数组遍历
- for循环
- forEach(function(item,index,arr){},thisObject)在数组每个元素项上执行函数
- map(function(item,index,arr){},thisObject)在数组每个元素项上执行函数并将所有结果放入数组中返回
- filter(function(item,index,arr){},thisObject) 函数在这里担任的是过滤器的角色，当元素符合条件，过滤器就返回true，而filter则会返回所有符合过滤条件的元素
- every(function(item,index,arr){}, thisObject]) every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）
- some(function(item,index,arr){}, thisObject]) 类似every，不过前者要求都符合筛选条件才返回true，后者只要有符合条件的就返回true）。
- indexOf(searchElement,fromIndex)返回第一个匹配的索引从前往后
- lastIndexOf(searchElement,fromIndex)返回第一个匹配的索引从后往前
8.字符串查询
- indexOf(searchElement,fromIndex)从前往后找到返回对应坐标，找不到返回-1
- lastIndexOf(searchElement,fromIndex)从后往前找到返回对应坐标，找不到返回-1
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌管理案例</title>
<script src="../bin/vue.js"></script>
<link rel="stylesheet" href="../bin/bootstrap/css/bootstrap.css">
</head>
<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>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,key) in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat('yyyy-mm-dd')}}</td>
<td><a @click.prevent="del(key)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.filter('dateFormat',function(dateStr,pattern='yyyy-mm-dd'){
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth()+1;
var d = dt.getDate();
if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
})
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
{id:3,name:'福特',ctime:new Date()},
{id:4,name:'林肯',ctime:new Date()},
]
},
methods: {
add(){
var car = {id: this.id,name: this.name, ctime: new Date()};
this.id = null;
this.name = null;
this.list.push(car);
},
del(key){
this.list.splice(key,1);
},
search(keywords){
var newList = this.list.filter(function(item){
return item.name.indexOf(keywords)!==-1;
});
return newList;
}
},
});
</script>
</body>
</html>
上一篇： Vue——品牌案例以及v-resource改造品牌案例
下一篇： Oracle 12c——删除数据表