vue中新增與刪除,關鍵字搜尋

2022-09-23 10:37:00 字數 3243 閱讀 9751

1

doctype html

>

2<

html

lang

="en"

>34

<

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=""

>

script

>

10head

>

1112

<

body

>

13<

div

id>

14<

div>

15<

label

>

id:16

<

input

type

="text"

v-model

='id'

>

17label

>

18<

label

for=""

>

name:

19<

input

type

="text"

v-model

='name'

@keyup.enter

='add'

>

20label

>

21<

input

type

="button"

value

="新增"

@click

='addbtnflag

&& add()'

>

22搜尋:

23<

input

type

="text"

v-model

='keywords'

id="search"

v-focus v-color

>

24div

>

2526

2728

2930

31<

p v-for

='item

in search(keywords)' :key

="item.id"

>

32<

input

type

="checkbox"

>

33}---- }

3435 -----------------<

a @click.prevent

="del(item.id)"

>刪除

a>36p

>

37div

>

3839

<

script

>

40//

使用 vue.directive() 定義全域性的指令 v-focus

41//

其中:引數1:指令的名稱,注意,在定義的時候,指令的名稱前面,不需要加 v- 字首,

42//

但是:再呼叫的時候,必須 在指令名稱前面 加上 v- 字首來進行呼叫

43//

引數2:是一個物件,這個物件身上,有一些指令相關的函式可以在特定的階段,執行相關的操作

44vue.directive(

'focus

', ,

52inserted:

function

(el) ,

56updated:

function

(el) ,

59})

6061

vue.directive(

'color',

65})

6667

6869

varvm

=new

vue(,78,

79,80,

81,8283]84

85},

86methods: )

9091

if(

this

.id

==''

)else

98this

.list.push(car)

99this

.id

=this

.name =''

100}

101102

},103

del(id)

110//

})111

varindex

=this

.list.findindex(item

=>

115})

116this

.list.splice(index, 1)

117},

118search(keywords)

125//

}) 126

//return newlist

127128

129//

注意:foreach some filter findindex 這些都是屬於陣列的新方法,

130//

都會對陣列中的每一項,進行遍歷,執行相關的操作;

131132

return

this

.list.filter(item

=>

145146

})147

//return newlist

148149

}150

151}

152})

153154

script

>

155body

>

156157

html

>