概述
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>折叠菜单</title>
<link rel="stylesheet" href="css/mui.css" />
</head>
<style>
* {
margin: 0 auto;
padding: 0;
}
.pages {
padding-top: 20px;
}
.cont {
position: relative;
margin: 0 auto;
width: 90%;
height: 88px;
background: #fff;
margin-bottom: 20px;
border-radius: 8px;
}
.conts {
position: relative;
margin: 0 auto;
width: 90%;
height: 250px;
background: #fff;
margin-bottom: 20px;
border-radius: 8px;
}
.cont-head {
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
}
.cont-head-block {
width: 10px;
height: 10px;
position: relative;
display: inline-block;
left: 20px;
border-radius: 50%;
border: 1px solid #ddd;
}
.cont-head-title {
position: absolute;
left: 50px;
width: 150px;
}
.cont-head-money {
position: absolute;
right: 20px;
}
.cont-title-view {
position: relative;
width: 100%;
height: 40px;
font-size: 15px;
/*background: red;*/
padding: 0px 18px;
line-height: 40px;
}
.cont-title-views {
position: relative;
width: 100%;
height: 30px;
font-size: 15px;
/*background: red;*/
line-height: 30px;
margin: 5px 0px;
}
.cont-title-left {
position: relative;
left: 5%;
}
.cont-titles {
position: relative;
left: 5%;
}
.cont-title {
position: relative;
width: 233px;
left: 12%;
display: block;
}
.submit {
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
background-color: #F38A5D;
text-align: center;
color: #fff;
font-size: 18px;
bottom: 0;
}
.mui-tltles {
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
}
</style>
<body>
<div class="pages">
<div class="mui-content" id="app">
<div class="mui-tltles"><span style="padding-left:20px; font-size: 18px;color: #474369;">服务套餐选择:</span>
</div>
<div class="cont-tent" v-for="(item,index) in list" v-on:click="liClick(item,index)">
<div class="cont" v-if="!item.selected">
<div class="cont-head">
<div class="cont-head-block"></div>
<span class="cont-head-title" v-if="item.id==0" style="color:#D4B468;">{{item.name}}</span>
<span class="cont-head-title" v-if="index==1" style="color:#9E9F9F;">{{item.name}}</span>
<span class="cont-head-title" v-if="index==2" style="color:#48445C;">{{item.name}}</span>
<span class="cont-head-title" v-else>{{item.name}}</span>
<span class="cont-head-money">{{item.price}}</span>
</div>
<div class="cont-title-view">
匹配人群：{{item.matching}}
</div>
</div>
<!--折叠-->
<div class="conts" v-if="index==id">
<div class="cont-head">
<div class="cont-head-block" v-if="index==0&&item.selected" style="background:#D4B468;"></div>
<div class="cont-head-block" v-if="index==1&&item.selected" style="background:green;"></div>
<div class="cont-head-block" v-if="index==2&&item.selected" style="background:#52469A;"></div>
<span class="cont-head-title" v-if="item.id==0" style="color:#D4B468;">{{item.name}}</span>
<span class="cont-head-title" v-if="index==1" style="color:#9E9F9F;">{{item.name}}</span>
<span class="cont-head-title" v-if="index==2" style="color:#48445C;">{{item.name}}</span>
<span class="cont-head-title" v-else>{{item.name}}</span>
<!--<span class="cont-head-title">{{item.name}}</span>-->
<span class="cont-head-money">{{item.price}}</span>
</div>
<div class="cont-title-views">
<span class="cont-title-left">匹配人群：{{item.matching}}</span>
</div>
<div class="cont-title-views">
<span class="cont-title-left">咨询方式：{{item.contact}}</span>
</div>
<div class="cont-title-views">
<span class="cont-title-left">服务内容：{{item.content}}</span>
</div>
<div class="cont-title-views">
<div class="cont-title">{{item.serviceTitle2}}</div>
<div class="cont-title">{{item.serviceTitle3}}</div>
<div class="cont-title">{{item.serviceTitle4}}</div>
</div>
</div>
</div>
<!--下一步-->
<div class="submit" v-on:click="next()">下一步</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" charset="utf-8">
new Vue({
el: '#app',
data: {
id: 3,
list: [
{ id:1,
name: "标题",
price: "0.01",
matching: "菜鸟老五的开发过程",
contact: "QQ287534291",
content:"世界和平",
serviceTitle2:"PC端开发过程",
serviceTitle3:"移动端H5微信公众号开发过程",
serviceTitle4:"小程序开发过程",
selected:false},
{ id:2,
name: "标题",
price: "0.01",
matching: "菜鸟老五的开发过程",
contact: "QQ287534291",
content:"世界和平",
serviceTitle2:"PC端开发过程",
serviceTitle3:"移动端H5微信公众号开发过程",
serviceTitle4:"小程序开发过程",
selected:false},
{ id:3,
name: "标题",
price: "0.01",
matching: "菜鸟老五的开发过程",
contact: "QQ287534291",
content:"世界和平",
serviceTitle2:"PC端开发过程",
serviceTitle3:"移动端H5微信公众号开发过程",
serviceTitle4:"小程序开发过程",
selected:false}
]
},
created() {
// this.getData();
},
methods: {
// 选择套餐方法
liClick(item, index) {
var that = this;
var list = that.list;
if (index == 0) {
list[index].selected = true;
list[1].selected = false;
list[2].selected = false;
that.id = 0;
} else if (index == 1) {
list[index].selected = true;
list[0].selected = false;
list[2].selected = false;
that.id = 1;
} else if (index == 2) {
list[index].selected = true;
list[0].selected = false;
list[1].selected = false;
that.list = list;
that.id = 2;
}
var newList = JSON.stringify(item);
sessionStorage.setItem("newList", newList);
},
// 下一步
next() {
window.location.href = "meal.html";
}
}
})
</script>
</body>
</html>
最后
以上就是雪白黄蜂为你收集整理的VUE写法实现前端折叠菜单（多端通用改改标签就可以）的全部内容，希望文章能够帮你解决VUE写法实现前端折叠菜单（多端通用改改标签就可以）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复