建筑设计方案网站,做一下网站需要什么时候开始,客户管理系统的功能,重庆短视频行业文章目录 前言一、小黑记事本二、购物车三、小黑记账清单 前言
bilibili视频地址
一、小黑记事本 效果图 主代码
!DOCTYPE html
html langen
headmeta charsetUTF-8/meta http-equivX-UA-Compatible!DOCTYPE html
html langen
headmeta charsetUTF-8/meta http-equivX-UA-Compatible contentIEedge/meta nameviewport contentwidthdevice-width, initial-scale1.0/link relstylesheet href./css/index.css/title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input placeholder请输入任务 v-modelinputTask classnew-todo/button classadd clickaddTask()添加任务/button/header!-- 列表区域 --section classmainul classtodo-list v-for(item,index) in list :keyitem.idli classtododiv classviewspan classindex{{ index 1 }}/span label{{ item.name }}/labelbutton classdestroy clickdelTask(item.id)/button/div/li/ul/section!-- 统计和清空 --footer classfooter v-showlist.length 0!-- 统计 --span classtodo-count合 计:strong {{ list.length }} /strong/span!-- 清空 --button classclear-completed clickclearAll()清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {list: [{id: 2, name: 我要吃饭},{id: 1, name: 我要睡觉}],inputTask: },methods: {addTask() {let tempId;//生成一个不重复的idif (this.list[0] ! null) {tempId this.list[0].id 1} else {tempId 1}this.list.unshift({id: tempId,name: this.inputTask});this.inputTask },delTask(id) {this.list this.list.filter(item item.id ! id);},clearAll() {this.list [];}}})/script
/body
/html
二、购物车 效果图 主代码
!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 /title购物车/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg srcimg/fruit.jpg alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div classmain v-iffruitList.length 0div 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.isChecked} v-for(item,index) in fruitList :keyitem.id div classtdinput typecheckbox v-modelitem.isChecked //divdiv classtdimg :srcitem.icon alt //divdiv classtd{{ item.price }}/divdiv classtddiv classmy-input-numberbutton classdecrease clicksub(item.id) - /buttonspan classmy-input__inner{{ item.num }}/spanbutton classincrease clickadd(item.id) /button/div/divdiv classtd{{ item.price*item.num }}/divdiv classtdbutton clickdel(item.id)删除/button/div/div/div/div!-- 底部 --div classbottom!-- 全选 --label classcheck-allinput typecheckbox v-modelisAll /全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice{{ totalPrice }}/span/span!-- 结算按钮 --button classpay结算( {{ totalCount }} )/button/div/div/div!-- 空车 --div classempty v-else空空如也/div/divscriptconst defaultFruitList [{id: 1,icon: img/火龙果.png,isChecked: true,num: 2,price: 6,},{id: 2,icon: img/荔枝.png,isChecked: false,num: 7,price: 20,},{id: 3,icon: img/榴莲.png,isChecked: false,num: 3,price: 40,},{id: 4,icon: img/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: img/樱桃.png,isChecked: false,num: 20,price: 34,},]const app new Vue({el: #app,data: {// 水果列表fruitList: JSON.parse(localStorage.getItem(list)) || defaultFruitList// fruitList: defaultFruitList},computed: {isAll: {get() {return this.fruitList.every(item item.isChecked);},set(value) {this.fruitList.forEach(item item.isChecked value);}},//计算选中的总数totalCount(){let countthis.fruitList.reduce((sum,item){if (item.isChecked){sumitem.num}return sum;},0)return count;},//计算选中的价格totalPrice(){let countthis.fruitList.reduce((sum,item){if (item.isChecked){sumitem.num*item.price}return sum;},0)return count;}},methods: {del(id) {this.fruitList this.fruitList.filter(item item.id ! id);},sub(id) {const fruit this.fruitList.find(item item.id id);fruit.num--;//数量为0删除商品if (fruit.num 0) {this.del(id)}},add(id) {const fruit this.fruitList.find(item item.id id);fruit.num}},watch: {fruitList:{deep:true,handler (newValue) {//当被删完的时候置空方便初始化数据if (newValue.length 0) {newValuenull}//需要将变化后的数据存入本地转JSONlocalStorage.setItem(list, JSON.stringify(newValue))}}}})/script/body
/html
三、小黑记账清单
效果图 主代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- CSS only --linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css/style.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}/style/headbodydiv idappdiv classcontain!-- 左侧列表 --div classlist-box!-- 添加资产 --form classmy-forminput typetext classform-control placeholder消费名称 v-model.trimname /input typetext classform-control placeholder消费价格 v-model.numberprice/button typebutton classbtn btn-primary clickadd()添加账单/button/formtable classtable table-hovertheadtrth编号/thth消费名称/thth消费价格/thth操作/th/tr/theadtbodytr v-for(item,index) in list :keyitem.idtd{{index1}}/tdtd{{item.name}}/tdtd :class{ red: item.price500}{{item.price.toFixed(2)}}/tdtda hrefjavascript:; clickdel(item.id)删除/a/td/tr/tbodytfoottrtd colspan4消费总计 {{ totalPrice.toFixed(2) }}/td/tr/tfoot/table/div!-- 右侧图表 --div classecharts-box idmain/div/div/divscript src../common/js/echarts.min.js/scriptscript src../common/js/vue.js/scriptscript src../common/js/axios.js/scriptscript/*** 接口文档地址* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app new Vue({el: #app,data: {list:[],name:,price:,},methods:{async getList(){const res await axios.get(https://applet-base-api-t.itheima.net/bill, {params: {creator: 小黑}})this.listres.data.data;this.myChart.setOption({series: [{//更新饼图数据项data: this.list.map(item({value:item.price,name:item.name}))}]});},async add(){if (!this.name){alert(请输入消费名称)return}if (typeof this.price ! number){alert(请输入正确的消费价格)return}let param{creator: 小黑,name:this.name,price:this.price};const res await axios.post(https://applet-base-api-t.itheima.net/bill,param);console.log(res)this.getList();this.namethis.price},async del(id){const resawait axios.delete(https://applet-base-api-t.itheima.net/bill/id);this.getList();}},created() {this.getList()},mounted(){option {title: {text: 消费账单列表,subtext: ,left: center},tooltip: {trigger: item},legend: {orient: vertical,left: left},series: [{name: 消费账单,type: pie,radius: 50%,data: [{ value: 1048, name: Search Engine },{ value: 735, name: Direct },{ value: 580, name: Email },{ value: 484, name: Union Ads },{ value: 300, name: Video Ads }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};// 基于准备好的dom初始化echarts实例this.myChart echarts.init(document.getElementById(main));// 绘制图表this.myChart.setOption(option);},computed:{totalPrice(){return this.list.reduce((sum,item)sumitem.price,0)}}})/script/body
/html
