1.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
font-family: simhei;
}
.header {
margin-left: 20px;
overflow: hidden
}
.header-ul {
list-style: none;
width: 820px;
height: 60px;
/*font-weight: bold;*/
font-size: 16px;
margin-top: 15px
}
.header-ul>li {
cursor: pointer;
float: left;
margin-left: 54px;
margin-top: 20px
}
.content {
width: 820px;
margin-left: 10px;
margin-top: 26px
}
.content-top {
width: 770px;
margin-top: 14px;
margin-left: 35px;
overflow: hidden;
border: 1px solid #EFEFEF;
border-radius: 8px 8px 0 0;
padding: 10px 10px;
border-bottom: none
}
.content-bottom {
width: 770px;
margin-top: 0;
margin-left: 35px;
overflow: hidden;
border: 1px solid #EFEFEF;
border-radius: 0 0 8px 8px;
padding: 10px 10px;
}
.area {
list-style: none;
overflow: hidden
}
.area>li {
float: left;
border: 1px solid gray;
border-radius: 5px;
color: gray;
height: 24px;
line-height: 24px;
text-align: center;
display: inline-block;
list-style: none;
width: auto;
padding: 0 8px;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.category {
list-style: none;
overflow: hidden;
}
.active {
border-color: #0082D9 !important;
color: #0082D9 !important;
}
.category>li {
float: left;
border: 1px solid gray;
border-radius: 5px;
color: gray;
height: 24px;
line-height: 24px;
text-align: center;
display: inline-block;
list-style: none;
width: auto;
padding: 0 8px;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.content-message-list {
width: 820px;
margin-left: 30px;
height: 640px;
}
.message-detail {
cursor: pointer;
width: 236px;
margin-left: 16px;
border: 1px solid #EFEFEF;
display: inline-block;
margin-top: 20px
}
.message-detail img {
width: 236px;
height: 135px;
}
.news {
display: block;
margin-left: 15px;
margin-top: 5px;
}
.news-second {
display: block;
margin-left: 15px;
margin-bottom: 7px;
font-size: 14px;
color: #BEBEBE;
margin-top: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page {
width: 300px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="index" style="background: #FFFFFF;">
<div class="header">
<ul class="header-ul">
<li onclick="changeContent('page/appoint/appoint-list.html?id=65','page-left/newest-activity.html')">参加活动</li>
<li style="height: 27px;border-bottom: 4px solid #0082D9">阵地资源预约</li>
<li onclick="changeContent('page/appoint/appoint-type.html','page-left/newest-activity.html')">服务点单</li>
<li onclick="changeContent('page/appoint/appoint-submit.html','page-left/newest-activity.html')">自主点单</li>
</ul>
</div>
<div class="content">
<div class="content-top">
<div style="float: left">按地区:</div>
<ul class="area">
<li @click="changeArea('')" :class="area==''?'active':''">全部</li>
<li :class="area==key?'active':''" @click="changeArea(key)" v-for="(val,key) in areaObj">{{val}}</li>
</ul>
</div>
<div class="content-bottom">
<div style="float: left">按类别:</div>
<ul class="category">
<li @click="changeType('')" :class="type==''?'active':''" style="">全部</li>
<li v-for="(val,key) in typeObj" :class="type==key?'active':''" @click="changeType(key)">{{val}}</li>
</ul>
</div>
</div>
<div class="content-message-list">
<list-item v-for="item in listData" :item="item":key="item.id"></list-item>
<div id="ele" style="line-height: 20px;height: 50px;">
<div class="Pagination" style=""></div>
</div>
</div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="../../css/plugins/pagination.css"/>
<script src="../../js/commen.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-resource.js"></script>
<script src="../../js/vue.ajax.js"></script>
<script src="../../js/plugins/pagination.js"></script>
<script type="application/javascript">
Vue.component('list-item', {
props: ['item'],
template:
`<div class="message-detail" @click= "changeContent(\'page/appoint/place-resource.html?id=\'+item.id) ">
<img :src ="item.cover_path">
<span class="news">{{item.name}}</span>
<span class="news-second">地址：{{item.address}}</span>
</div>`,
methods:{
changeContent:function(url){
console.log(url)
changeContent(url);
}
}
});
var data = new Vue({
el: '#index',
data: {
listData:[],
area:"",
areaObj:{},
type:"",
typeObj:{},
limit:"9",
totalPage:0,
currentPage:1,
},
mounted:function(){
this.getList();
this.getFilter();
},
watch:{
//用以初始化页面时获得翻页数量后初始化分页器
totalPage(val,oldval){
var that=this;
// 调用分页器
Pagination({
ele: '#ele',
totalPage:val,
currentPage:that.currentPage,
needTotalCount: false,
callback: function(pageClick){
that.currentPage=pageClick;
that.getList();
}
});
}
},
methods: {
//获取过滤项
getFilter:function(){
var that=this;
ajaxVue("post",this,
urlHead+'index.php?s=/Admin/Interface/getDictionary',
{
"type":"field"
},
function(data){
that.areaObj=data.data.area;
that.typeObj=data.data.type;
}
)
},
//获取list详情
getList:function(){
var that=this;
ajaxVue("get",this,
urlHead+"index.php?s=/Admin/Interface/getFields",
{
"token":getToken(),
"area":this.area,
"type":this.type,
"page":this.currentPage,
"limit":this.limit
},
function(data){
that.totalPage=data.data.pages;
that.listData=data.data.list;
}
)
},
changeType:function(key){
this.type=key;
this.getList();
},
changeArea:function(key){
this.area=key;
this.getList();
}
},
filters: {
toFixed: function (value) {
return value.toFixed(2);
}
}
});
</script>
</html>
以下是vue.ajax.js
/**
* 用vue-resource.js简易封装的ajax请求
* 依赖vue.js,vue-resource.js
* type："get"或者"post"字符串
* vm：vue对象
* url：请求地址
* param：参数对象
* fn 回调方法
*
*/
function ajaxVue(type,vm,url,param,fn){
if (type=="get"||type=="GET"){
//发送get请求
vm.$http.get(
url,
{params :param,}
).then(function(res){
fn(res.body);
},function(){
console.log("ajax fail")
});
}else if(type=="post"||type=="POST"){
//发送 post 请求
vm.$http.post(
url,
param,
{emulateJSON:true}).then(function(res){
fn(res.body);
},function(res){
console.log("ajax fail");
});
}else{
console.log("ajax 请求类型错误");
}
}
2.Vue对象中的一些属性说明
el//模板单元 ，如果使用类选择器选择将只会渲染第一个div
data//需要使用到的变量
methods//需要使用到的方法定义 ，js可以直接通过vm.方法() 调用;
watch//监听指定变量时触发的方法
filters//过滤器，显示变量时对变量进行格式化
methods//等生命周期钩子，Vue对象到指定生命周期时触发该方法 如初始化请求接口要使用该属性
3.一些备忘技巧
1.如图需求：点击一个标签(动态加载)改变颜色，其他标签变灰
<li v-for="(val,key) in typeObj" :class="type==key?'active':''" @click="changeType(key)">{{val}}</li>
在data中定义type属性用以标记（changeType方法实现）当前点击的标签，key是每一个标签的顺序码，当某一个标签的key和type值相同时表示标签被选中给予active的class改变属性
当然，在改变标签颜色同时需要把选择的type当作参数重新请求列表数据
2.vue中使用laydate
laydate依赖jquery但是很好用
//利用生命周期钩子在vue完成加载后初始化
mounted:function(){
var that=this;
laydate.render({
elem: '#order-date',
theme: '#0082D9',
min: 1,
done: function(value, date){
that.orderDate=value;
that.orderStatus=0;
},
value:that.orderDate
});
},
网友评论