好看的网页千篇一律，有趣的代码万里挑一。
一起来看看比较经典的Vue案例，示例：大麦网。
1. 大麦网列表页
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app{
margin: 10px;
}
.type{
display: flex;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #eee;
}
.type li{
padding: 5px 10px;
margin: 0 2px;
}
.type li:not(:first-child){
cursor: pointer;
}
.type li.active{
background-color: orangered;
color: white;
}
.list{
border: 1px solid #eee;
padding: 0 10px;
}
.list .item{
display: flex;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.list .item .img{
width: 160px;
cursor: pointer;
}
.list .item .img img{
width: 100%;
}
.list .item .desc{
margin-left: 5px;
}
.list .item .desc li{
margin: 10px 0;
}
</style>
<body>
<div id="app">
<ul class="type">
<li>城市：</li>
<!-- 使用:class绑定样式 -->
<li @click="cityActive=index" :class="{active:cityActive===index}" v-for="(item,index) in citys" :key="index">{{item}}</li>
</ul>
<ul class="type">
<li>分类：</li>
<li @click="typeActive=index" :class="{active:typeActive===index}" v-for="(item,index) in types" :key="index">{{item}}</li>
</ul>
<div class="list">
<div class="item" v-for="(item,index) in tickets" :key="index">
<div class="img">
<img :src="item.verticalPic" @click="gotoDetail(item.id)">
</div>
<ul class="desc">
<li>{{item.name}}</li>
<li>{{item.venuecity}} | {{item.venue}}</li>
<li>{{item.showtime}}</li>
<li>{{item.price_str}} 元</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
//定义数据
data() {
return {
//城市数组
citys:['全部','绍兴','武汉','苏州','南京','重庆','成都','北京','安阳','日照','舟山','北京','宁波','上海'],
//城市高亮索引
cityActive:0,
//分类数组
types:['全部','体育','演唱会','话剧歌剧','音乐会','展览休闲'],
//分类高亮索引
typeActive:0,
//第一步：门票数组
tickets:[]
}
},
watch:{
//监听城市高亮索引
cityActive(){
this.loadTickets()
},
//监听分类高亮索引
typeActive(){
this.loadTickets()
}
},
//创建完成的生命周期
created() {
// 第三步：created生命周期里面调用发送请求的方法
this.loadTickets()
},
//定义方法
methods: {
//加载门票信息的方法
loadTickets(){
//第二步：发生ajax请求，获取所有的门票信息
axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
//判断是否需要根据城市筛选数据
if(this.cityActive>0){
//获取城市名称
let city = this.citys[this.cityActive]
//筛选数据
resultData = resultData.filter(r=>r.cityname===city)
}
//判断是否需要根据分类筛选数据
if(this.typeActive>0){
//获取分类名称
let type = this.types[this.typeActive]
//筛选数据
resultData = resultData.filter(r=>r.categoryname===type)
}
this.tickets = resultData
})
},
//跳转到详情页
gotoDetail(id){
window.location.href = "./detail.html?id="+id
}
},
})
</script>
</body>
2. 大麦网详情页
<!DOCTYPE html>
<html>
<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>大麦网-详情页</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app{
margin: 10px;
}
.item{
display: flex;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.item .img{
width: 260px;
}
.item .img img{
width: 100%;
}
.item .desc{
margin-left: 5px;
}
.item .desc li{
margin: 10px 0;
}
.pd{
display: flex;
}
.pd div{
border: 1px solid #eee;
padding: 2px 5px;
margin: 0 2px;
cursor: pointer;
}
.pd div.active{
background-color: orangered;
color: white;
}
.sl{
display: flex;
}
.sl .btn{
padding: 2px 8px;
margin: 0 2px;
}
.sl .count{
outline: none;
width: 20px;
text-align: center;
border: none;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<div class="img">
<img :src="item.verticalPic">
</div>
<ul class="desc">
<li>{{item.name}}</li>
<li>场馆：{{item.venuecity}} | {{item.venue}}</li>
<li>时间：{{item.showtime}}</li>
<li class="pd">
票档：
<div @click="activeIndex=index" :class="{active:activeIndex===index}"
v-for="(item,index) in priceList">{{item}}</div>
</li>
<li class="sl">数量：
<!-- :disabled用于绑定元素是否禁用 -->
<button class="btn" @click="count--" :disabled="count===1">-</button>
<input readonly class="count" :value="count">张
<button class="btn" @click="count++" :disabled="count===6">+</button>
</li>
<li>合计：￥{{totalPrice | toFixed2}}元</li>
</ul>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
new Vue({
el:'#app',
data:{
//定义一个门票对象
item:{},
//价格数组
priceList:[199,399,599,899,1299],
//价格高亮索引
activeIndex:0,
//购买数量
count:1
},
//过滤器
filters:{
//保留两位小数
toFixed2(val){
return val.toFixed(2)
}
},
//计算属性
computed:{
//用于计算总价
totalPrice(){
return this.priceList[this.activeIndex]*this.count
}
},
//在created生命周期函数中获取id
created() {
//获取url参数id
// search里面保存的值的格式是：?id=12345
let id = window.location.search.split('=')[1]
//发生ajax请求，根据id获取门票信息
axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
//获取指定的门票对象
this.item = resultData.find(r=>r.id===id)
})
},
})
</script>
</body>
</html>
网友评论