指令综合运用-品牌案例.html

  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>