Vue實現新增 刪除 關鍵字查詢

從今天開始，將不定期更新關於 vue 的學習以及各種方法的使用，好了，下面就開始吧

下面是乙個簡單的小例子，實現 列表的新增、刪除、關鍵字查詢

>首頁

title

>

<

script

src="./lib/vue.js"

>

script

>

<

link

rel="stylesheet"

href

="./css/home.css"

>

<

link

rel="stylesheet"

href

="./css/bootstrap.css"

>

head

>

<

body

>

<

div

id>

<

div

class

="panel panel-default"

>

<

div

class

="panel-heading"

>

<

h3 class

="panel-title"

>新增人物資訊

h3>

div>

<

div

class

="panel-body form-inline"

>

<

label

>

id:

<

input

type

="text"

v-model

="id"

class

="form-control"

>

label

>

<

label

>

name:

<

input

type

="text"

v-model

="name"

class

="form-control"

>

label

>

<

label

>

age:

<

input

type

="text"

v-model

="age"

class

="form-control"

>

label

>

<

label

>

gender:

<

input

type

="text"

v-model

="gender"

class

="form-control"

>

label

>

<

label

>

<

input

type

="button"

@click

="add"

value

="新增"

class

="btn btn-primary"

>

label

>

<

label

>

關鍵字搜尋：

<

input

type

="text"

v-model

="keywords"

placeholder

="輸入關鍵字搜尋"

class

="form-control"

>

label

>

div>

div>

<

table

class

="table table-bordered table-hover"

>

<

thead

>

<

tr>

<

th>id

th>

<

th>name

th>

<

th>age

th>

<

th>gender

th>

<

th>登記時間

th>

<

th>編輯

th>

tr>

thead

>

<

tbody

>

<

tr v-for

="item in search(keywords)"

:key

="item.id"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td>

<

a href

="#"

@click.prevent

="del(item.id)"

>刪除

a>

td>

tr>

tbody

>

table

>

div>

<

script

src="./js/home.js"

>

script

>

body

>

html

>

var vm = new

vue(,,,
]},
methods: ;
this
.list.push(addlist);
this.id = this.name = this.age = this.gender = this.ctime = "";
},del(id) 
//});
//第二種方法
var index = this.list.findindex(item =>
})this.list.splice(index, 1)
},search(keywords) 
//});
//return newlist;
//第二種方法
//filter方法是陣列的過濾方法，返回乙個新的陣列，不會對原陣列修改，return true 為想要的值，return false 則為去掉的值
return
this.list.filter(item =>})}
}})

關鍵字查詢

題目描述 每次給你一篇文章，和一些關鍵字，需要你告訴我多少關鍵字將匹配於文章。輸入描述 第一行包含乙個整數，表示有多少篇文章。最後一行是文章，長度不超過1000000。輸出描述 輸出文章中包含多少關鍵字。輸入樣例 15 shehe sayshr heryasherhs 輸出樣例 3源 include...

AngularJS關鍵字查詢

按貨物數量反序排序 按貨物入庫時間正序排序 按貨物入庫時間反序排序 入庫貨物名稱 貨物數量 貨物產地 貨物單價 貨物入庫時間日期操作 刪除mo.controller myctrl function scope 刪除 scope.del function delname else 定義下拉列表的排序 ...

linux關鍵字查詢

指定單個檔案查詢 方法一 cat test.log grep 關鍵字 方法二 grep i 關鍵字 test.log 關鍵字查詢日誌，並顯示該條日誌的前後n 10 行記錄 cat test.log grep b10 a10 關鍵字 從當前目錄的所有.log檔案中查詢內容關鍵字是 test 檔案 fi...