双鸭山建设网站,行业前10的网站建设公司,dede网站打不开,网站设计市场价阶段练习旨在学习完Vue 指令、计算属性、侦听器-CSDN博客后#xff0c;进行自我检测#xff0c;每个练习分为效果显示、需求分析、静态代码、完整代码、总结 四个部分#xff0c;效果显示和准备代码已给出#xff0c;我们需要完成“完整代码”部分。 练习1#xff1a;tab栏… 阶段练习旨在学习完Vue 指令、计算属性、侦听器-CSDN博客后进行自我检测每个练习分为效果显示、需求分析、静态代码、完整代码、总结 四个部分效果显示和准备代码已给出我们需要完成“完整代码”部分。 练习1tab栏的动态高亮显示
效果显示 静态代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title022(1)练习tab栏的active效果/titlestyle* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}/style
/head
bodydiv idappullia classactive href#京东秒杀/a/lilia href#每日特价/a/lilia href#品类秒杀/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body
/html
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title022(1)练习tab栏的动态高亮显示/titlestyle* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}/style
/headbodydiv idappulli v-for(item,index) in list :keyitem.id clickactiveIndex indexa :class{active : indexactiveIndex} href#{{item.name}}/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 2,list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body/html
错误代码
lia :class{active : activeIndexitem.id} v-for(item,index) in list :keyitem.idclickactiveIndexid v-modelactiveIndex href#{{item.name}}/a/li
总结
列表渲染点击事件v-bind对样式进行控制
练习2进度条
静态代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title022(2)练习进度条/titlestyle.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}/style
/head
bodydiv idappdiv classprogressdiv classinnerspan50%/span/div/divbutton设置25%/buttonbutton设置50%/buttonbutton设置75%/buttonbutton设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body
/html
完整代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title022(2)练习进度条/titlestyle.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}/style
/headbodydiv idappdiv classprogressdiv classinner :style{width: percent % }span{{percent}}%/span/div/divbutton v-for(item, index) in list :keyindex clickpercent item设置{{item}}%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 25,list: [25, 50, 75, 100]}})/script
/body/html
总结
列表渲染点击事件v-bind对样式进行控制操作style
注意
:style{width: percent % } 如果没有将百分比值与单位分开并添加单引号例如:style{width: percent %}那么Vue.js将会尝试将百分比值与JavaScript表达式中的%一起解析为字符串而这不是一个有效的CSS值会导致样式设置失败。 练习3购物车 静态代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./css/inputnumber.css /link relstylesheet href./css/index.css /title028练习购物车/title
/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg srchttp://autumnfish.cn/static/fruit.jpg alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div classmaindiv classtable!-- 头部 --div classtheaddiv classtrdiv classth选中/divdiv classth th-pic图片/divdiv classth单价/divdiv classth num-th个数/divdiv classth小计/divdiv classth操作/div/div/div!-- 身体 --div classtbodydiv classtr activediv classtdinput typecheckbox checked //divdiv classtdimg srchttp://autumnfish.cn/static/火龙果.png alt //divdiv classtd6/divdiv classtddiv classmy-input-numberbutton classdecrease - /buttonspan classmy-input__inner2/spanbutton classincrease /button/div/divdiv classtd12/divdiv classtdbutton删除/button/div/divdiv classtrdiv classtdinput typecheckbox //divdiv classtdimg srchttp://autumnfish.cn/static/荔枝.png alt //divdiv classtd7/divdiv classtddiv classmy-input-numberbutton disabled classdecrease - /buttonspan classmy-input__inner1/spanbutton classincrease /button/div/divdiv classtd14/divdiv classtdbutton删除/button/div/div/div/div!-- 底部 --div classbottom!-- 全选 --label classcheck-allinput typecheckbox /全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice24/span/span!-- 结算按钮 --button classpay结算( 6 )/button/div/div/div!-- 空车 --div classempty空空如也/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 水果列表fruitList: [{id: 1,icon: http://autumnfish.cn/static/火龙果.png,isChecked: true,num: 2,price: 6,},{id: 2,icon: http://autumnfish.cn/static/荔枝.png,isChecked: false,num: 7,price: 20,},{id: 3,icon: http://autumnfish.cn/static/榴莲.png,isChecked: false,num: 3,price: 40,},{id: 4,icon: http://autumnfish.cn/static/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: http://autumnfish.cn/static/樱桃.png,isChecked: false,num: 20,price: 34,},],},})/script
/body/html 完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href028inputnumber.css /link relstylesheet href028index.css /title028练习购物车/title
/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg src# alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div classmaindiv classtable!-- 头部 --div classtheaddiv classtrdiv classth选中/divdiv classth th-pic图片/divdiv classth单价/divdiv classth num-th个数/divdiv classth小计/divdiv classth操作/div/div/div!-- 身体 --div classtbodydiv classtr :class{active: item.isCheckedtrue } v-for(item, index) in fruitList :keyitem.iddiv classtdinput typecheckbox clickitem.isChecked!item.isChecked //divdiv classtdimg src# alt //divdiv classtd{{item.price}}/divdiv classtddiv classmy-input-numberbutton classdecrease clickitem.num-- - /buttonspan classmy-input__inner{{item.num}}/spanbutton classincrease clickitem.num /button/div/divdiv classtd{{subTotalCount(index)}}/divdiv classtdbutton clickdel(item.id)删除/button/div/div/div/div!-- 底部 --div classbottom!-- 全选 --label classcheck-allinput typecheckbox clickallClickFlag!allClickFlag /全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice{{totalCount}}/span/span!-- 结算按钮 --button classpay结算( {{totalKind}} )/button/div/div/div!-- 空车 --div classempty v-showflag0空空如也/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flag: 0,allClickFlag: false,// 水果列表fruitList: [{id: 1,icon: #,isChecked: false,num: 2,price: 6,},{id: 2,icon: #,isChecked: false,num: 7,price: 20,},{id: 3,icon: #,isChecked: false,num: 3,price: 40,},{id: 4,icon: #,isChecked: false,num: 10,price: 3,},{id: 5,icon: #,isChecked: false,num: 20,price: 34,},],},methods: {subTotalCount(index) {return this.fruitList[index].num * this.fruitList[index].price},del(id) {this.fruitList this.fruitList.filter(item item.id ! id)},allClick() {if (this.allClickFlag true) {this.fruitList.forEach(item {item.isChecked false;});} else {this.fruitList.forEach(item {item.isChecked true;});}}},computed: {totalCount() {let total this.fruitList.reduce((sum, item) {if (item.isChecked true) {return sum item.num * item.price;} else {return sum;}}, 0);return total;},totalKind() {let kind this.fruitList.reduce((sum, item) {if (item.isChecked true) {return sum item.num;} else {return sum;}}, 0);return kind;}},watch: {allClickFlag: {immediate: true,handler(newVal) {if (newVal true) {this.fruitList.forEach(item {item.isChecked true;});} else {this.fruitList.forEach(item {item.isChecked false;});}}}}})/script
/body/html
