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>