4.综合实例
4.1.基于数据驱动的选项卡
4.1.1.需求
需求说明：
1. 被选中的选项按钮颜色成橙色
2. 完成被选中选项下的数据列表渲染
3. 完成选项切换4.1.2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tab div {
display: none;
padding: 10px;
border: 1px solid black;
width: 428px;
}
#tab div.active{
display: block;
}
#tab button.active{
background-color: orange;
}
#tab button{
width: 150px;
height: 50px;
}
#tab ul{
padding: 0;
}
#tab li{
list-style: none;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="app">
<div id="tab">
<button @click="changeTab(i)" :class="{active: index==i}" v-for="(item, i) in tabData">{{item.tabTitle}}</button>
<div v-for="(item, j) in tabData" :class="{active: index==j}">
<ul>
<li v-for="listitem in item.list">{{listitem.newsTitle}}</li>
</ul>
</div>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
tabData:[
{
tabTitle:'财经',
list: [
{id:1, newsTitle: '大数据刷新认知：平均每天都有儿童在遭受性侵！'},
{id:2, newsTitle: '董登新：外资没有能力把中国的保险市场全部吃掉'},
{id:3, newsTitle: '收评：沪指大幅回调跌1.80% 钢铁板块领跌两市'},
{id:4, newsTitle: '党报评个税改革：起征点并非越高越好 需统筹平衡'},
]
},
{
tabTitle:'股票',
list: [
{id:1, newsTitle: '2.5万股民心凉!200多亿市值没了 长生被基金0估值'},
{id:2, newsTitle: '美年健康回应深交所6大关切：医师执业确有瑕疵'},
{id:3, newsTitle: '详细解读！中央政治局会议透露出这些重大信息！'},
{id:4, newsTitle: '业绩预增近3倍却瞬间跌停！谁撂倒了这只绩优股？'},
]
},
{
tabTitle:'商业',
list: [
{id:1, newsTitle: 'SOHO中国全面竞价租房 潘石屹感慨房子坍塌敲警钟'},
{id:2, newsTitle: 'iPhone吸金 服务创新高 苹果盈利收入两位数大涨\n'},
{id:3, newsTitle: '《西虹市首富》5天破12亿 开心麻花战略转型？'},
{id:4, newsTitle: 'Twitter股价暴跌超20% 美国社交平台陷流量瓶颈'},
]
},
],
index: 0
},
methods: {
changeTab(i){
this.index = i
}
}
})
</script>
</body>
</html>4.1.2.练习作业
尝试完成下一节课程的需求，请保持自己独立实现，不要先看实现的代码
4.2.后台管理菜单
4.2.1.需求
需求说明：
1. 完成菜单列表渲染
2. 点击相应菜单，展开其子菜单，再次点击，收缩子菜单4.2.2.相关资源下载地址
静态文件下载地址
4.2.3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
padding: 0;
}
a{
text-decoration: none;
color: hsla(0, 0%, 100%, .65);
}
ul li {
list-style: none;
}
#menu {
width: 200px;
height: 800px;
background-color: #001529;
}
#menu .logo {
height: 64px;
background-color: #002140;
padding-left: 16px;
line-height: 64px;
}
#menu .logo h1 {
font-size: 16px;
color: #fff;
margin: 0 0 0 5px;
}
#menu .logo h1, #menu .logo img {
display: inline-block;
vertical-align: middle;
}
.menu-content {
color: hsla(0, 0%, 100%, .65);
font-size: 14px;
padding: 0;
}
.menu-content .submenu {
padding-left: 16px;
}
.submenu .submenu-title {
padding: 10px 0;
}
.submenu .submenu-list {
padding-left: 16px;
}
.submenu .submenu-list li {
padding: 5px 0;
}
.submenu .submenu-list{
display: none;
}
.submenu .active{
display: block;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div id="menu">
<div class="logo">
<a href="http://nodeing.com">
<img src="images/logo.ico" alt="">
<h1>螺钉课堂后台管理</h1>
</a>
</div>
<ul class="menu-content">
<menu-list v-for="item in menuData" :key="item.id" :item="item"></menu-list>
</ul>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('menu-list', {
template: ` <li class="submenu" >
<div class="submenu-title" @click="show">{{item.submenu_title}}</div>
<ul :class="[submenulist,{active: isShow}]">
<li v-for="value in item.submenu_lists" :key="value.href"><a :href="value.href">{{value.content}}</a></li>
</ul>
</li>`,
props: ['menuData', 'item'],
data(){
return {
isShow: false,
submenulist: 'submenu-list'
}
},
methods:{
show(){
this.isShow = !this.isShow
}
}
});
new Vue({
el: "#app",
data: {
menuData: [
{ id: 1,
submenu_title: '课程管理',
submenu_lists: [
{
content: '课程列表',
href: '/course/list'
},
{
content: '创建课程',
href: '/course/create'
},
{
content: '课程统计',
href: '/course/statistical'
},
]
},
{
id:2,
submenu_title: '用户管理',
submenu_lists: [
{
content: '用户列表',
href: '/user/list'
},
{
content: '增加用户',
href: '/user/add'
},
{
content: '在线用户',
href: '/user/online'
},
{
content: '登录日志',
href: '/user/loginlog'
},
{
content: '批量导入',
href: '/user/import'
},
]
},
{
id: 3,
submenu_title: '会员管理',
submenu_lists: [
{
content: '全部会员',
href: '/vip/all'
},
{
content: '添加会员',
href: '/vip/add'
},
{
content: '会员等级',
href: '/vip/level'
},
{
content: '即将到期会员',
href: '/vip/willexpire'
},
{
content: '过期会员',
href: '/vip/expired'
},
]
},
{
id:4,
submenu_title: '系统设置',
submenu_lists: [
{
content: '网站基础信息',
href: '/system/basis'
},
{
content: '主题设置',
href: '/system/theme'
},
{
content: '导航设置',
href: '/system/nav'
},
{
content: '友情链接',
href: '/system/links'
},
{
content: '财务设置',
href: '/system/Finance'
},
]
}
]
}
})
</script>
</body>
</html>4.3.购物车
4.3.1.需求
需求说明：
1. 循环渲染出所有商品
2. 商品数量加减后，统计单个商品总价
3. 点击每个商品的删除按钮可以删除当前商品
4. 统计商品数量，统计选中商品数量
5. 统计选中商品总价
6. 删除选中商品
7. 实现全选功能4.3.2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #F5F5F5;
}
#shoppingcart {
width: 960px;
margin: 50px auto;
}
#shoppingcart button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
}
#shoppingcart button.danger {
background-color: red;
padding: 8px;
border: none;
color: white;
}
#shoppingcart .ipt {
width: 60px;
height: 36px;
border: 1px solid #ccc;
border-radius: 5px;
padding-left: 20px;
}
#shoppingcart table {
width: 100%;
background-color: #fff;
}
#shoppingcart table td {
padding: 10px 0;
text-align: center;
}
.footer {
height: 70px;
background-color: #fff;
margin-top: 30px;
line-height: 70px;
}
.footer-left {
float: left;
padding-left: 24px;
}
.footer-left a, .footer-left span {
margin-left: 10px;
}
.footer-right {
float: right;
padding-right: 24px;
}
.footer-right button, .footer-right div {
display: inline-block;
}
.footer-right button {
background-color: #00c3f5;
padding: 8px 16px;
border-radius: 5px;
color: #fff;
}
.footer-right span {
font-weight: bold;
font-size: 16px;
color: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<div id="shoppingcart">
<table>
<tr>
<td><input type="checkbox" v-model="ischeckedAll">全选</td>
<td>商品</td>
<td>单价(元)</td>
<td>数量</td>
<td>小记(元)</td>
<td>操作</td>
</tr>
<tr v-for="item in goods" :key="item.id">
<td><input type="checkbox" v-model="item.checked"></td>
<td>{{item.goods_name}}</td>
<td>{{item.goods_price}}</td>
<td>
<button @click="decrease(item.id)">-</button>
<input type="text" v-model="item.goods_num" class="ipt">
<button @click="increase(item.id)">+</button>
</td>
<td>{{item.goods_price * item.goods_num}}</td>
<td>
<button @click="delete_goods(item.id)" class="danger">删除</button>
</td>
</tr>
</table>
<div class="footer">
<div class="footer-left">
<input type="checkbox" v-model="ischeckedAll">
<span>全选</span>
<a @click="delete_checked">删除选中的商品</a>
<span>共{{goods.length}}件商品，已选择{{checkedLength}}件</span>
{{checkedId}}
</div>
<div class="footer-right">
<div>合计(不含运费): <span>¥{{total_price}}元</span></div>
<button>去结算</button>
</div>
</div>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let goods = [
{
id: 1,
goods_name: '魅族手环',
goods_price: 169,
goods_num: 1,
checked: true
},
{
id: 2,
goods_name: '魅族耳机',
goods_price: 163,
goods_num: 1,
checked: true
},
{
id: 3,
goods_name: '小米汽车',
goods_price: 1890,
goods_num: 1,
checked: false
},
{
id: 4,
goods_name: '坚果pro2',
goods_price: 1699,
goods_num: 1,
checked: true
}
]
new Vue({
el: '#app',
data: {
goods: goods
},
methods: {
increase(id) {
for (let item of this.goods.values()) {
if (item.id == id) {
item.goods_num++
}
}
},
decrease(id) {
for (let item of this.goods.values()) {
if (item.id == id && item.goods_num > 1) {
item.goods_num--
}
}
},
delete_goods(id) {
this.goods = this.goods.filter((item) => {
//满足条件的保留 不满足条件的删除
return item.id !== id
})
},
delete_checked() {
this.goods = this.goods.filter((item) => {
return !item.checked
})
}
},
computed: {
total_price() {
let result = 0
for (let item of this.goods.values()) {
if (item.checked) {
result += item.goods_num * item.goods_price
}
}
return result
},
ischeckedAll: {
get() {
return this.goods.every((item) => {
return item.checked
})
},
set(newValue){
this.goods.forEach((item)=>{
item.checked = newValue
})
}
},
checkedLength() {
return this.goods.filter((item) => {
return item.checked
}).length
}
}
})
</script>
</body>
</html>螺钉课堂视频课程地址：http://edu.nodeing.com