view:
Function: 1: List rendering 2: Add function 3: Delete function 4: Keyword search
The DIV code is as follows:
<div id="list" class="list">
<div class="lt-nr">
<div class="lt-tt">id:</div>
<input class="lt-text" type="text" v-model="id" />
</div>
<div class="lt-nr">
<div class="lt-tt">name:</div>
<input class="lt-text" type="text" v-model="name" />
</div>
<div class="clear"></div>
<button class="lt-btn" @click="add()">添加</button>
<div class="blank10"></div>
<input type="text" class="lt-ss" v-model="keywords" placeholder="请输入您要搜索的关键词"/>
<table class="table table-bordere">
<tr><th>序号</th>
<th>名称</th>
<th>编辑</th>
</tr>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td><a href="#" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div>
The vue code is as follows:
<script>
export default{
name:'list',
data(){
return{
id:'',
name:'',
keywords:'',
list:[ //列表渲染
{
id:1,name:'css进阶'},
{
id:2,name:'css3进阶'},
{
id:3,name:'Javascript实战'},
{
id:4,name:'HTML基础'},
{
id:5,name:'flash制作'}
]
}
},
methods:{
add(){
//添加功能
var car = {
id:this.id,name:this.name}
this.list.push(car)
this.id = this.name ='';
},
del(id){
//删除功能
this.list.some((item,i)=>{
if(item.id===id){
this.list.splice(i,1)
return
}
})
},
//写法2
//del(index){ //删除功能
//this.book.splice(index,1)
//},
search(keywords){
//搜索功能
var newList=[]
this.list.forEach(item => {
if(item.name.indexOf(keywords)!= -1 ){
newList.push(item)
}
});return newList
},
}
}
</script>