<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
h1{
font-size: 36px;
color:#d7567f;
text-align: center;
}
.tableStyle{
min-width:400px;
margin:15px auto;
border:0;
}
.tableStyle th{
background-color: #d7567f;
}
.tableStyle,.tableStyle th,.tableStyletd{
font-size: 0.95em;
text-align: center;
padding:4px;
border-collapse: collapse;
}
.tableStyle th,.tableStyletd{
border:1px solid #e89eb5;
border-width: 1px 0 1px 0;
}
.tableStyle tr{
border:1px solid #e89eb5;
}
.tableStyle tr:nth-child(odd){
background-color: #f1c6d4;
}
.tableStyle tr:nth-child(even){
background-color: #fdfdfd;
}
.btn{
margin:10px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h1>图书表格</h1>
<div class="btn">
<label for="keyName">请输入搜索关键字</label>
<input type="text" id="keyName" v-model="keyword"><br><br>
<button @click="sortType=1">按价格降序</button>
<button @click="sortType=2">按价格升序</button>
</div>
<table class="tableStyle">
<tr>
<th>序号</th>
<th>书名</th>
<th>价格</th>
</tr>
<tr v-for="(item,index) in filBooks" :key="item.bookId">
<td>{{index+1}}</td>
<td>{{item.bookName}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
keyword:"",//搜索关键字绑定
sortType:0,//排序方式，0表示原顺序，1表示降序，2表示升序
books:[
{bookId:"001",bookName:"Vue.js开发实战",price:45},
{bookId:"002",bookName:"JavaScript提高",price:32},
{bookId:"003",bookName:"jQuery项目实战",price:25},
{bookId:"004",bookName:"Vue.js入门与提高",price:42},
{bookId:"005",bookName:"HTML+CSS3网页设计",price:36},
{bookId:"006",bookName:"微信小程序开发",price:36},
{bookId:"007",bookName:"HTML+CSS3项目实战",price:39},
{bookId:"008",bookName:"jQuery案例教程",price:40},
{bookId:"009",bookName:"小程序跨平台开发",price:52},
]
},
computed:{
// 所有字符串都包含空字符串，不是vue实例管理的方法，最好定义成箭头函数
filBooks:function(){
var arr = this.books.filter(item=>{
return item.bookName.indexOf(this.keyword)!=-1;
})
// console.log(arr);
if(this.sortType){
arr.sort((book1,book2)=>{
return this.sortType===1 ? book2.price-book1.price : book1.price-book2.price;
})
}
return arr;
}
}
})
</script>
</body>
</html>
v-for过滤和排序，购物车页面效果，笔记本
需积分: 32 57 浏览量
2022-03-15
12:48:34
上传
评论
收藏 1.35MB RAR 举报
vue.rar （31个子文件） 
vue v-for记事本 css 
index.css 7KB
模板-pre copy.html 2KB js vue.js 334KB js vue.js 334KB index·.html 1KB 计算属性简易购物车 css shop.css 12KB img 
1.jpg 91KB js vue.js 334KB 计算属性-购物车-pre.html 1KB 购物车结算页面 css shop.css 12KB img shop 
20201102151329.png 106KB 20201103084523.png 12KB 20201102153027.png 65KB 20201102151619.png 164KB 20201103084601.png 19KB 20201103091557.png 117KB 20201102152230.png 128KB 20201103084438.png 14KB 20201103084539.png 12KB 20201103084531.png 16KB 20201103084514.png 8KB 20201102150701.png 262KB 20201103084608.png 15KB 20201103084459.png 11KB 20201103084450.png 12KB 20201103084506.png 12KB js vue.js 334KB shop.js 2KB 购物车-pre.html 2KB v-for过滤.html 3KB v-for排序.html 4KB
评论0