鄱阳电商网站建设,网站建设放在什么科目,百度速页建站,免费推广网站入口2023燕◆ 指令补充
指令修饰符
通过 . 指明一些指令 后缀#xff0c;不同 后缀 封装了不同的处理操作 → 简化代码 v-bind 对于样式控制的增强
为了方便开发者进行样式控制#xff0c; Vue 扩展了 v-bind 的语法#xff0c;可以针对 class 类名 和 style 行内样式…◆ 指令补充
指令修饰符
通过 . 指明一些指令 后缀不同 后缀 封装了不同的处理操作 → 简化代码 v-bind 对于样式控制的增强
为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制 。 v-bind 对于样式控制的增强 - 操作class
语法 :class 对象/数组 v-bind 对于样式控制的增强 - 操作style
语法 :style 样式对象 v-model 应用于其他表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
简单来说就是使用v-model来给表单元素设置默认的初始值 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input v-modelsex typeradio namesex value0男input v-modelsextyperadio namesex value1女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value100北京/optionoption value101上海/optionoption value102成都/optionoption value103南京/option/selectbrbr自我描述textarea v-modeldescription/textarea button立即注册/button/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: true,sex: 1,cityId: 102,description: }})/script
/body
/html ◆ computed 计算属性
概念基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
语法
① 声明在 computed 配置项中一个计算属性对应一个函数 ② 使用起来和普通属性一样使用 {{ 计算属性名 }} 计算属性 → 可以将一段 求值的代码 进行封装 computed 计算属性 vs methods 方法 计算属性完整写法 重点 成绩案例 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./styles/index.css /titleDocument/title/headbodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length 0tr v-for(item,index) in list :keyitem.idtd{{index1}}/tdtd{{item.subject}}/tdtd :class{red: item.score60}{{item.score}}/tdtda click.preventdel(item.id) href#删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{total}}/spanspan stylemargin-left: 50px平均分{{avg}}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinputtypetextplaceholder请输入科目v-model.trimsubject//div/divdiv classform-itemdiv classlabel分数/divdiv classinputinputtypetextplaceholder请输入分数v-model.numberscore//div/divdiv classform-itemdiv classlabel/divdiv classinputbutton classsubmit clickadd()添加/button/div/div/div/divscript src../vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, subject: 语文, score: 20 },{ id: 7, subject: 数学, score: 99 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },computed: {total(){// 使用数组求和函数return this.list.reduce((sum,item)sumitem.score,0)},avg(){if(this.list.length 0){return 0}return (this.list.reduce((sum,item)sumitem.score,0)/this.list.length).toFixed(2)}},methods: {del(id){this.list this.list.filter(itemid!item.id)},add(){if(!this.subject){alert(请输入科目名称)return}console.log( typeof this.score );if( typeof this.score !number || !(this.score 0 this.score 100)){alert(你输入的不是数字或者分数不在0-100之间)return}this.list.unshift({ id: new Date(), subject: this.subject, score: this.score })}}})/script/body
/html◆ watch 侦听器重点
作用监视数据变化执行一些 业务逻辑 或 异步操作。
语法
① 简单写法 → 简单类型数据直接监视
② 完整写法 → 添加额外配置项
简单写法 完整写法 小结
watch侦听器的语法有几种
① 简单写法 → 监视简单类型的变化 ② 完整写法 → 添加额外的配置项 (深度监视复杂类型立刻执行) ◆ 综合案例水果购物车 !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购物车/title/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg src./img/fruit.jpg alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div classmain v-iffruitList.length0div 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 v-for(item,index) in fruitList :key :class{active: item.isChecked}div classtdinput typecheckbox v-modelitem.isChecked//divdiv classtdimg :srcitem.icon alt //divdiv classtd{{item.price}}/divdiv classtddiv classmy-input-numberbutton classdecrease clickreduce(item.id) - /buttonspan classmy-input__inner{{item.num}}/spanbutton classincrease clickitem.num /button/div/divdiv classtd{{(item.price*item.num).toFixed()}}/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{{totalMoney}}/span/span!-- 结算按钮 --button classpay结算( {{totalNum}} )/button/div/div/div!-- 空车 --div classempty v-else空空如也/div/divscript src../vue.js/scriptscriptlet defaultALL [{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: {// 水果列表//JSON.parse(localStorage.getItem(fruitList))||[]fruitList: JSON.parse(localStorage.getItem(fruitList))||[]},computed: {// 完整写法isAll:{get(value){return this.fruitList.every(itemitem.isChecked)},set(value){this.fruitList.forEach(itemitem.isChecked value)}},totalMoney(){return this.fruitList.reduce((sum,item){if(item.isChecked){return sum(item.num*item.price)}else{return sum}},0)},totalNum(){return this.fruitList.reduce((sum,item){if(item.isChecked){return sum item.num}else{return sum}},0)}},methods: {del(id){this.fruitList this.fruitList.filter((item)id!item.id)},reduce(id){//得到数组对应的数据let obj this.fruitList.find(itemitem.idid)if(obj.num1){obj.num--}// console.log(index);// console.log(this.fruitList[index]);// console.log(num);}},// 6 持久化到本地//监听数组数据变化watch:{//使用完整写法fruitList:{deep: true,handler (newValue){//将变化的值存储到本地localStorage.setItem(fruitList,JSON.stringify(newValue))}}}})/script/body
/html小结
业务技术点总结 1. 渲染功能 v-if/v-else v-for :class 2. 删除功能: 点击传参 filter过滤覆盖原数组 3. 修改个数点击传参 find找对象 4. 全选反选计算属性computed 完整写法 get/set 5. 统计选中的总价和总数量: 计算属性computed reduce条件求和 6. 持久化到本地 watch监视localStorageJSON.stringify, JSON.parse
