vue基础入门（4）
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
vue基础入门（4）的更多相关文章
- vue基础入门（2.1）
2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
- vue基础入门
Hello World <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...
- vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
- vue基础入门（2.3）
2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...
- vue基础入门（2.2）
2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
- vue基础入门（1）
1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...
- vue 基础入门（一）
app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...
随机推荐
- Java实现 蓝桥杯 算法提高 文本加密
算法提高 9-2 文本加密 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 先编写函数EncryptChar,按照下述规则将给定的字符c转化(加密)为新的字符:"A&quo ...
- Java实现 蓝桥杯VIP 算法提高 促销购物
算法提高 促销购物 时间限制:1.0s 内存限制:256.0MB 问题描述 张超来到了超市购物. 每个物品都有价格,正好赶上商店推出促销方案.就是把许多东西一起买更便宜(保证优惠方案一定比原价便宜). ...
- Java实现最优二叉查找树
1 问题描述 在了解最优二叉查找树之前,我们必须先了解何为二叉查找树? 引用自百度百科一段讲解: 二叉排序树(Binary Sort Tree)又称二叉查找树(Binary Search Tree), ...
- java实现取字母组成串
** 取字母组成串** A B C D中取5次,每个字母都可以重复取出,形成一个串. 现在要求,串中A出现的次数必须为偶数(0次也算偶数). 求可以形成多少种可能的串. 参考答案: 528 publi ...
- Nginx跨域及Https配置
一.跨域 1. 什么是跨域? 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制(指一个域下的文档或脚本试图去请求另一个域下的资源,这 ...
- win7 64位系统怎么使用debug
安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...
- redis 分布式锁的简单使用
RedisLock--让 Redis 分布式锁变得简单 目录 1. 项目介绍 2. 快速使用 2.1 引入 maven 坐标 2.2 注册 RedisLock 2.3 使用 3. 参与贡献 4. 联系 ...
- CSS中的float和margin的混合使用
在最近的学习中,在GitHub上找了一些布局练习,我发现了我自己对布局超级不熟悉(很难受). 在以前的学习中,感觉使用CSS就记住各个属性的功能就OK了,但是呢?真的很打脸.不说了,太伤心了,进入正题 ...
- C++ Primer Plus（一）
完整阅读C++ Primer Plus 系统重新学习C++语言部分,记录重要但易被忽略的,关键但易被遗忘的. 预备 1.C++相对于C增加了最关键的两项,面向对象和范型编程. 处理数据 2.对于变量明 ...
- Canvas 画布 H5
前言: canvas 元素用于在网页上绘制图形. canvas 本身是一个标签,<canvas>标签定义图形,必须使用脚本来绘制图形,比如在画布上(Canvas)画一个红色矩形,渐变矩形, ...