vue静态添加与搜索筛选

zhan11400
字数 6760阅读 336

静态搜索,静态添加

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端研习社-图书管理系统</title>
<style>
h1{text-align:center}
table,td,th{border-collapse:collapse;border-spacing:0}
table{margin:0 auto;width:600px;text-align:center}
td,th{padding:5px 10px;border:1px solid #bcbcbc}
th{background:#42b983;color:#fff;font-weight:400;font-size:1.2rem;cursor:pointer}
tr:nth-of-type(odd){background:#fff}
tr:nth-of-type(even){background:#eee}
.add{margin:10px auto;padding:10px 50px;width:400px;border-radius:5px;background:#ccc}
h2{text-align:center}
p{height:50px;line-height:50px}
input{padding-left:10px;width:300px;height:50px;font-size:20px;line-height:50px}
p button{float:right;width:100px;height:50px;border-radius:5px;font-size:20px;line-height:50px}
</style>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>图书管理系统</h1>
<p><input type="text" v-model="keywords"></p>
<input type="button" value="搜索" @click="search(keywords)">
<table>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,key,index) in search(keywords)">

<td>{{item.name}}-{{key}}-{{index}}</td>
<td>{{item.author}}</td>
<td>{{item.price}}</td>
<td>{{item.tag}}</td>
<td><button @click="delBook(key)">删除</button></td>
</tr>
</tbody>
</table>
<div class="add">
<h2>添加新书</h2>
<div class="form-group">
<p>书名:<input type="text" v-model="newBook.name"></p>
<p>作者:<input type="text" v-model="newBook.author"></p>
<p>价格:<input type="text" v-model="newBook.price"></p>
<p>标签:<input type="text" v-model="newBook.tag"></p>
<p><button v-on:click='addBook'>添加</button></p>
<p><button v-on:click='reverse2'>添加</button></p>
</div>
</div>
</div>
</body>
<script>
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

var vm = new Vue({
el: '#app',
data: {
books:[{
id:0,
name:'倚天',
author:'',
price:'',
tag:''
},{
id:0,
name:'上天',
author:'',
price:'',
tag:''
}],
newBook:{
id:0,
name:'屠龙',
author:'',
price:'',
tag:''
},
keywords:''
},
methods:{
addBook:function(){//添加新书
console.log(...this.books)
console.log(this.books)
this.books=[...this.books,this.newBook];
this.newBook={};
},
delBook:function(idx){//删除当前这本书
this.books.splice(idx,1);
},
reverse2(){
//字符串拆成数组类似PHP的explode
console.log(this.message.split(''))
//var aa=[1,2,3];
//console.log(aa.reverse())
//reverse()将数组进行倒叙,php的array_reverse
console.log(this.message.split('').reverse());
//join('')将数组合并,类似PHP的implode
this.message=this.message.split('').reverse().join('');
console.log(this.message)
},
search(keywords){
var newList=[];
//数组的方法 forEach filter some findIndex
//方法一
//forEach 数组每个元素都执行一次回调函数。
this.books.forEach(item=>{
//indexOf搜索数组中的元素,并返回它所在的位置。
if(item.name.indexOf(keywords) !=-1){
newList.push(item)
}
})

//filter:检测数值元素,并返回符合条件所有元素的数组。
//在es6中,为字符串提供了一个string.prototype.includes('要包含的字符串'),成功返回true,否false
//方法二 filter() 检测数值元素,并返回符合条件所有元素的数组。
newList=this.books.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
//方法三 some() 检测数组元素中是否有元素符合指定条件。

this.books.some(item=>{
if(item.name.includes(keywords)){
newList.push(item)
}
})
//方法四 findIndex() 返回符合传入测试(函数)条件的数组元素索引。
var newList2=[];
this.books.findIndex(item=>{
console.log(item.name)
if(item.name.includes(keywords)){
newList2.push(item)
}
})
return newList2;
}
}
})
</script>

</html>


0条评论
    暂无评论
发表评论