效果图
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>黄菊华：Vue.js商城实战</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/chanpin_fenlei.css">
<link rel="stylesheet" href="css/dibu_caidan.css">
<script src="vue2.2.2.min.js" ></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<!--商品分类-->
<div class="fenlei">
<!--商品分类-左侧-->
<div class="fenlei_zuo">
<div class="fenlei_zuo_xiangmu ">分类03</div>
<div v-for="fl in fenleis">
<div class="fenlei_zuo_xiangmu" v-bind:class="fl.id==flid?'fenlei_zuo_xuanzhong':''" v-on:click="cps_cs(fl.id)" >
{{fl.name}}
</div>
</div>
</div>
<!--商品分类-右侧-->
<div class="fenlei_you">
<div class="cp2_zuixin">
<a v-bind:href="'chanpin_xiangqing.html?id='+cp.cp_id+'&mc='+cp.cp_mingcheng" class="cp2_lianjie" v-for="cp in chanpins">
<img v-bind:src="cp.cp_tupian" class="cp2_img" />
<p class="cp2_mc">{{cp.cp_mingcheng}}</p>
<p class="cp_mc2">¥ {{cp.jiage}}</p>
</a>
</div>
</div>
</div>
<!--底部导航菜单-->
<div class="dibu_caidan" id="dl_yes">
<a href="index.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/a-on.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti dibu_caidan_xiangmu_biaoti_xuanzhong">首页</p>
</a>
<a href="chanpin_fenlei.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/b-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti">分类</p>
</a>
<a href="gouwuche.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/c-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti">购物车</p>
<!--p class="gouwucheshu">5</p-->
</a>
<a href="u_index.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/d-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti">会员</p>
</a>
</div>
<div class="dibu_caidan" id="dl_no">
<a href="index.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/a-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti ">首页</p>
</a>
<a href="chanpin_fenlei.html" class="dibu_caidan_xiangmu">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/b-on.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti dibu_caidan_xiangmu_biaoti_xuanzhong">分类</p>
</a>
<a onClick="denglu()" class="dibu_caidan_xiangmu" style="cursor:pointer;">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/c-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti">购物车</p>
<!--p class="gouwucheshu"></p-->
</a>
<a onClick="denglu()" class="dibu_caidan_xiangmu" style="cursor: pointer">
<p class="dibu_caidan_xiangmu_tupian"><img src="img/d-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
<p class="dibu_caidan_xiangmu_biaoti">会员</p>
</a>
</div>
<script>
function denglu(){
if(confirm("请登录")){
window.location.href = "u_login.html"
}
}
if(localStorage.u_login=="yes"){
document.getElementById("dl_yes").style.display="";
document.getElementById("dl_no").style.display="none";
}else{
document.getElementById("dl_yes").style.display="none";
document.getElementById("dl_no").style.display="";
}
</script>
</div><!--app-->
<script>
new Vue({
el: '#app',
data: {
chanpins:[],
fenleis:[],
flid:0
},
//页面初始化要执行的
mounted:function(){
this.getCps();
this.GetFeilei();
},
//自定义的函数（方法）
methods:{
//页面初始化加载产品
getCps:function(){
axios.get('http://vue.yaoyiwangluo.com/wx_CpList_tuijian6.asp')
.then(function (response) {
//response.data 返回值,下面插入你要执行的代码
this.chanpins = response.data;
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
//加载分类产品
GetFeilei:function(){
axios.get('http://vue.yaoyiwangluo.com/wx_fenlei.asp')
.then(function (response) {
//response.data 返回值,下面插入你要执行的代码
this.fenleis = response.data;
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
//根据选择的分类，加载该分类产品
cps_cs:function(cs){
this.flid = cs;
axios.get('http://vue.yaoyiwangluo.com/wx_fenlei_chanpin.asp',
{
params:{
int_lxid1:cs
}
}
)
.then(function (response) {
//response.data 返回值,下面插入你要执行的代码
this.chanpins = response.data;
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
},
})
</script>
</body>
</html>
