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 ...
随机推荐
- Rocket - tilelink - HintHandler
https://mp.weixin.qq.com/s/MHW_aBSL72YNee9bVWWeaw 简单介绍HintHandler的实现. 1. 基本功能 实现Hint请求的处理 ...
- Redis 入门到分布式 （七）Redis复制的原理与优化
一.目录 Redis复制的原理与优化 什么是主从复制 全量复制和部分复制 复制的配置 故障处理 开发运维常见问题 二. 什么是主从复制 1.单机有什么问题? 单机如果机器故障,那么久无法及时提供服务: ...
- Java实现 LeetCode 136 只出现一次的数字
136. 只出现一次的数字 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现 ...
- Java实现 LeetCode 48 旋转图像
48. 旋转图像 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示 ...
- win7 64位系统怎么使用debug
安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...
- 调优 | Apache Hudi应用调优指南
通过Spark作业将数据写入Hudi时,Spark应用的调优技巧也适用于此.如果要提高性能或可靠性,请牢记以下几点. 输入并行性:Hudi对输入进行分区默认并发度为1500,以确保每个Spark分区都 ...
- dfs算法总结
DFS 深度优先搜索 主要有两种实现方法:栈和递归 什么是DFS?说白了就是一直遍历元素的方式而已,我们可以把它看成是一条小蛇,在每个分叉路口随意选择一条路线走,直到撞到南墙,才会调头返回到上一个分叉 ...
- 00-04.kaliLinux-手动配置IP地址
在KaliLinux中手动配置网卡 用vim打开网卡的配置文件,配置各个网卡信息 root@kali:~# cd /etc/network root@kali:/etc/network# ------ ...
- char 型变量中能不能存贮一个中文汉字?为什么?
在c语言中,char类型占一个字节,而汉字占两个字节,所以不能存储. 在java语言中,char类型占两个字节,而java默认采用Unicode码是16位,所以一个Unicode码占两个字节,java ...
- beta版 tomcat 应用监控指标
指标是集合网络搜索得到的汇总并且现在在使用的,现在记录一下 数据平台:Prometheus v2.18.1 展示平台:Grafana 指标来源: 日志类的是mtail 其他都是通过jmx_export ...