指令综合运用-品牌案例.html
2021-04-01 13:24
标签：ros pat get contain indexof include 括号 ase methods 案列：使用vue实现品牌的增加，删除和关键字搜索以及时间的处理 分析:手动实现筛选的方式： 指令综合运用-品牌案例.html 标签：ros pat get contain indexof include 括号 ase methods 原文地址：https://www.cnblogs.com/yangyunhao/p/12562444.html
hr> 输入筛选名称：
input type="text" v-model="searchName">
tbody>
tr v-for="item in search(searchName)">
td>{{item.id}}td>
td>{{item.name}}td>
td>{{item.ctime}}td>
td>
a href="#" @click.prevent="del(item.id)">删除a>
td>
tr>
tbody>
search（）{
return this.list.filter(x=>{
return x.name.indexof(name)!=-1;
});
}
重头大戏开场
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 meta name="viewport" content="width=device-width, initial-scale=1.0">
6 title>vue实列title>
7 script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">script>
8
9 link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10 head>
11 body>
12 div id="app">
13
14 div class="panel panel-preimary">
15 div class="panel-heading">
16 h3 class="panel-title">添加产品h3>
17 div>
18 div class="panel-body form-inline">
19 label>
20 ID:
21 input type="text" class="form-control" v-model="id">
22 label>
23 label>
24 Name:
25 input type="text" class="form-control" v-model="name">
26 label>
27
28 input type="button" value="添加" class="btn btn-primary" @click="add">
29 label>
30 搜索关键字：
31 input type="text" class="from-control" v-model="keywords">
32 label>
33 div>
34 div>
35 table class="table table-bordered table-hover table-striped">
36 thead>
37 tr>
38 th>Idth>
39 th>Nameth>
40 th>CTIMEth>
41 th>OPERATIONth>
42 tr>
43 thead>
44 tbody>
45
46
47
48
49
50 tr v-for="item in search(keywords)" :key="item.id">
51 td>{{ item.id }}td>
52 td v-text="item.name">td>
53 td>{{ item.ctime | dateFormat(‘yyyy-MM-dd‘)}}td>
54 td>
55 a href="" @click.prevent="del(item.id)">删除a>
56 td>
57 tr>
58 tbody>
59 table>
60 div>
61
62
63 script>
64
65 Vue.filter(‘dateFormat‘,function (dateStr,pattern=‘‘) {
66 //根据字符串获取特定时间
67 var dt = new Date(dateStr)
68 //yyy-mm-dd
69 var y = dt.getFullYear()
70
71 var m = dt.getMonth()+1
72
73 var d = dt.getDate()
74 if(pattern && pattern.toLowerCase() == ‘yyy-mm-dd‘){
75 return ‘${y}-${m}-${d}‘
76 }else{
77 var hh = dt.getHours()
78 //padStart:开始填充；padEnd()：末尾填充（如两位填充数字1：01和10）
79 var mm = (dt.getMinutes()).toString().padStart(2,‘0‘)
80 var ss = (dt.getSeconds()).toString().padStart(2,‘0‘)
81 return ‘${y}-${m}-${d} ${hh}:${mm}:${ss}‘
82 }
83 })
84
85 var vm = new Vue({
86 el:"#app",
87 data :{
88 dt:new Date(),
89 id:null,
90 name:null,
91 keywords:‘‘,
92 list:[
93 { id: 1, name: ‘蛋挞‘, ctime: new Date() },
94 { id: 2, name: ‘奶茶‘, ctime: new Date() }
95
96 ]
97
98 },
99 methods:{
100
101
102
103 add(){
104 //console.log(‘ok‘)
105 //分析
106 //1.获取到id与name直接从data中获取
107 //2.组织出一个对象
108 //3.把这个对象，调用数组的方法， 添加到当前list中
109 //4.在vue中我们已经实现了数据的双向绑定通过v-model每当我们修改data中的数据的时候我们vue会默认监听会默认监听到数据的改动，自动把最新的数据，应用到页面上
110 //5.在vue中我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
111
112
113 var food = { id: this.id, name: this.name, ctime: new Date()}
114
115 this.list.push(food);
116 this.id = this.name =‘‘;
117 },
118 del(id){
119 //我们根据ID进行数据的删除
120 //1.我们根据Id找到我们要删除项的索引
121 //2.如果我们找到了索引就开始调用数组的splice的方法
122
123 /* this.list.some((item,i) => {
124 if(item.id == id){
125 this.list.splice(i,1)
126 //在数组some方法中如果reyurn true，就会立即终止这个数组的后续循环
127 return true;
128 }
129
130 }) */
131
132
133 var index = this.list.findIndex(item=>{
134 if(item.id == id){
135 return true;
136 }
137 })
138 //console.log(index)
139 this.list.splice(index,1)
140 },
141 search(keywords){
142
143 /* var newlist = []
144 this.list.forEach(item=>{
145 if(item.name.indexof(keywords)!=-1){
146 newList.push(item)
147 }
148 })
149 return newList(item)*/
150
151 //注意： forEach some filter findIndex 这些都属于数组的新方法，
152 //都会对数组每一项进行遍历执行相关操作
153 return this.list.filter(item =>{
154 // if(item.name.indexOf(keywords) != -1)
155
156 // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes(‘要包含的字符串‘)
157 // 如果包含，则返回 true ，否则返回 false
158 // contain
159 if (item.name.includes(keywords)) {
160 return item
161 }
162 })
163 //return newList
164
165 }
166 },
167 filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
168 // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
169 dateFormat: function (dateStr, pattern = ‘‘) {
170 // 根据给定的时间字符串，得到特定的时间
171 var dt = new Date(dateStr)
172 return dateStr
173 },
174
175 }
176 })
177 script>
178 body>
179 html>
下一篇：URL定制、分页、渲染器