欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中添加与删除,关键字搜索

程序员文章站 2022-05-03 15:00:52
1 2 3 4 5 6 7
  1 <!doctype html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="x-ua-compatible" content="ie=edge">
  8     <title>document</title>
  9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 10 </head>
 11 
 12 <body>
 13     <div id="app">
 14         <div>
 15             <label>id:
 16                 <input type="text" v-model='id'>
 17             </label>
 18             <label for="">name:
 19                 <input type="text" v-model='name' @keyup.enter='add'>
 20             </label>
 21             <input type="button" value="添加" @click='addbtnflag && add()'>
 22             搜索:
 23             <input type="text" v-model='keywords' id="search" v-focus v-color>
 24         </div>
 25         <!-- 注意: v-for 循环的时候 , key 属性只能使用 number获取string -->
 26         <!-- 注意:key 在使用的时候,必须使 v-bind 属性绑定的形式 指定 key 的值 -->
 27         <!--在组件中,使用v-for循环的时候,或者在一些特殊的情况中,如果 v-for 有问题 ,必须 在使用 v-for 的同时 ,指定 唯一的字符串/数字 类型 :key  值  -->
 28         <!-- v-for  中的数据,都是直接从 data 上的 list 中直接渲染过来的 -->
 29         <!-- 自定义一个  search  方法,同时 ,把所有的关键词,通过传参的形式,传递给了 search 方法 -->
 30         <!-- 在 search  方法内部,通过 执行 for 循环,把所有符合  搜索关键字的数据,保存到 一个新数组中 返回 -->
 31         <p v-for='item in search(keywords)' :key="item.id">
 32             <input type="checkbox">
 33             {{item.id}}---- {{item.name}}
 34             <!-- <a @click='shift(index)'>删除</a> -->
 35             -----------------<a @click.prevent="del(item.id)">删除</a>
 36         </p>
 37     </div>
 38 
 39     <script>
 40         //使用 vue.directive() 定义全局的指令 v-focus
 41         //其中:参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,
 42         //但是:再调用的时候,必须 在指令名称前面 加上 v-  前缀来进行调用
 43         //参数2:是一个对象,这个对象身上,有一些指令相关的函数可以在特定的阶段,执行相关的操作
 44         vue.directive('focus', {
 45             bind: function (el) {
 46                 //每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
 47                 //注意:在每个 函数中,第一个参数,永远是 el  , 表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的的js对象
 48                 //在元素 刚绑定了指令的时候,还没有 插入到 dom 中去,这时候,调用focus 方法没有作用
 49                 //因为,一个元素,只有插入dom之后,才能获取焦点
 50                 el.focus()
 51             },
 52             inserted: function (el) {
 53                 //inserted 表示元素 插入到dom中的时候,会执行 inserted 函数【触发一次】
 54                 el.focus()
 55             },
 56             updated: function (el) {
 57                 //当vnode更新的时候 会执行updated  可能会触发多次
 58             },
 59         })
 60 
 61         vue.directive('color',{
 62             bind: function (el) {
 63                 el.style.color = 'red'
 64             }
 65         })
 66 
 67 
 68 
 69         var vm = new vue({
 70             el: "#app",
 71             data: {
 72                 id: '',
 73                 name: '',
 74                 keywords: '',//关键词
 75                 addbtnflag:true,
 76                 list: [
 77                     { id: 1, name: '奥迪' },
 78                     { id: 2, name: '宝马' },
 79                     { id: 3, name: '奔驰' },
 80                     { id: 4, name: '玛莎拉蒂' },
 81                     { id: 5, name: '保时捷' },
 82                     { id: 6, name: '五菱宏光' }
 83                 ]
 84               
 85             },
 86             methods: {
 87                 add() {
 88                    
 89                     // this.list.push({ id: this.id, name: this.name })
 90                   
 91                     if( this.id == ''){
 92 
 93                         this.addbtnflag=false
 94 
 95                     }else{
 96 
 97                         var car = { id: this.id, name: this.name }
 98                         this.list.push(car)
 99                         this.id = this.name = ''
100                     }
101                 
102                 },
103                 del(id) {
104                     //根据id删除
105                     // this.list.some((item,i)=>{
106                     //     if(item.id == id){
107                     //         this.list.splice(i,1)
108                     //         return true;
109                     //     }
110                     // })
111                     var index = this.list.findindex(item => {
112                         if (item.id == id) {
113                             return true;
114                         }
115                     })
116                     this.list.splice(index, 1)
117                 },
118                 search(keywords) {
119                     //根据关键字,进行数据的搜索
120                     // var newlist = []
121                     // this.list.foreach(item =>{
122                     //     if(item.name.indexof(keywords) != -1){
123                     //         newlist.push(item)
124                     //     }
125                     // }) 
126                     // return newlist
127 
128 
129                     //注意:foreach some  filter findindex  这些都是属于数组的新方法,
130                     //都会对数组中的每一项,进行遍历,执行相关的操作;
131 
132                     return this.list.filter(item => {
133 
134                         //if(item.name.indexof(keywords) != -1)
135 
136                         //注意:es6中,为字符串提供了一个新的方法,叫做 string.prototype.includes('要包含的字符串')
137 
138                         //如果包含,则返回 true 否则返回false
139 
140                         //contain
141 
142                         if (item.name.includes(keywords)) {
143                             return true
144                         }
145 
146                     })
147                     // return newlist
148 
149                 }
150 
151             }
152         })
153 
154     </script>
155 </body>
156 
157 </html>

 vue中添加与删除,关键字搜索