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 ...
随机推荐
- hdl - 软件编程与硬件建模
https://mp.weixin.qq.com/s/Y75I9e3s4fDPZuv-CyiNDA 介绍软件编程思维与硬件建模思维的不同与相似之处. 1. 软件编程思维 编程,意 ...
- Java实现 LeetCode 486 预测赢家
486. 预测赢家 给定一个表示分数的非负整数数组. 玩家1从数组任意一端拿取一个分数,随后玩家2继续从剩余数组任意一端拿取分数,然后玩家1拿,--.每次一个玩家只能拿取一个分数,分数被拿取之后不再可 ...
- Java实现 蓝桥杯VIP 算法训练 确定元音字母位置
算法训练 确定元音字母位置 时间限制:1.0s 内存限制:512.0MB 输入一个字符串,编写程序输出该字符串中元音字母的首次出现位置,如果没有元音字母输出0.英语元音字母只有'a'.'e'.'i'. ...
- java实现取球游戏
/* 今盒子里有 n 个小球,A.B 两人轮流从盒中取球,每个人都可以看到另一个人取了多少个, 也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球的 ...
- Java实现 蓝桥杯 历届试题 横向打印二叉树
问题描述 二叉树可以用于排序.其原理很简单:对于一个排序二叉树添加新节点时,先与根节点比较,若小则交给左子树继续处理,否则交给右子树. 当遇到空子树时,则把该节点放入那个位置. 比如,10 8 5 7 ...
- 阿里云专有网络配置以及交换机配置+ip、子网掩码、ip网段计算原理讲解
在阿里云上购买ECS或者其他服务,如redis.polardb时,需要配置专有网络,阿里的文档写的总体上还是比较抽象的,没有一定的网络基础,会一脸懵. 所以这里我来进行专有网络和交换机的配置,以及ip ...
- 循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数
在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对 ...
- 诸葛亮vs司马懿，排序算法大战谁能笑到最后？
阵前对峙 公元234年,蜀汉丞相诸葛孔明再次北伐. 一日,与司马仲达所率魏军两军相峙,二人阵前舌战. 司马曰:"诸葛村夫,吾与汝相斗数年,斗兵斗阵斗谋略,均已疲乏.今日,何不一改陈规,斗点新 ...
- [computer graphics]简单光照模型(Phong和Blinn-Phong)和明暗处理
简单光照模型(Phong和Blinn-Phong)和明暗处理 支持点光源和平行光,是一种简单光照模型,它将光照分解成了三个部分,分别为 漫反射 镜面反射 环境光 如图所示,是一个简单的几何模型. \( ...
- Ement 学习
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content- ...