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实现 蓝桥杯VIP 算法提高 质数的后代
算法提高 质数的后代 时间限制:1.0s 内存限制:256.0MB 问题描述 在上一季里,曾提到过质数的孤独,其实从另一个角度看,无情隔膜它们的合数全是质数的后代,因为合数可以由质数相乘结合而得. 如 ...
- Java实现约瑟夫环问题
约瑟夫环问题起源于一个犹太故事.约瑟夫环问题的大意如下: 罗马人攻占了桥塔帕特,41个人藏在一个山洞中躲过了这场浩劫.这41个人中,包括历史学家Josephus(约瑟夫)和他的一个朋友.剩余的39个人 ...
- IDEA2020年激活码
若出现无法使用,激活失败的情况,可以关注公众号:凌晨四点的程序员,回复消息"IDEA"持续更新最新激活码 2020年05月26更新(2020年6月份) OI7FTW2137-eyJ ...
- MAC/VMware配置双机调试简述
Configuration 注:建议提前备份所有修改内容,可能会导致无法开机. 我的测试环境: server: windows 10 + windbg client: windows 7 Server ...
- 一个基于Consul的.NET Leader选举类库
前段时间有传言说Consul将不能在我国继续使用,后被查明是因法律问题Vault企业版产品不能在国内销售.Valut和Consul都是HashiCorp公司的产品,并且都推出了开源版本,继续使用开源版 ...
- DevOps系列——Jenkins/Gitlab自动打包部署
前面只说了DevOps的两个基础组件Jenkins和GitLab,客官也不要着急,我们玩就玩的深入一点,Gitlab和Jenkins的各种配置和 插件很多,也够啃一阵子的,不要照着操作一通就感觉万事大 ...
- Flask 的 session
Flask 的 session @app.route("/", ) def index(): # 如何设置sessoion # 1 导入session # 2 给sessoion设 ...
- Centos 7 k8s Deployment新副本控制器
一.概念 Kubernetes提供了一种更加简单的更新RC和Pod的机制,叫做Deployment.通过在Deployment中描述你所期望的集群状态,Deployment Controller会将在 ...
- Mybatis详解(二) sqlsession的创建过程
我们处于的位置 我们要清楚现在的情况. 现在我们已经调用了SqlSessionFactoryBuilder的build方法生成了SqlSessionFactory 对象. 但是如标题所说,要想生成sq ...
- cheerio html方法中文被编码问题
var $ = cheerio.load("<h1><p>你好</p><em>Hello,World!</em></h1&g ...