做服装网站的意义是什么,免费虚拟主机空间,甘肃网站建设方案及案例,广州谷歌seo公司文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器#xff08;监视器#xff09;简单写法 → 简单类型数据#xff0c;直接监视完整写法 → 添加额外配置项 计算属性 computed
computed 的使用方法
**概念#xff1… 文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器监视器简单写法 → 简单类型数据直接监视完整写法 → 添加额外配置项 计算属性 computed
computed 的使用方法
**概念**基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
语法 ① 声明在 computed 配置项中一个计算属性对应一个函数 ② 使用起来和普通属性一样使用 {{ 计算属性名 }}
computed: {计算属性名 () {基于现有数据编写求值逻辑return 结果}
},计算属性 → 可以将一段 求值的代码 进行封装
示例
要求
通过计算属性来求得获得的礼物的总数 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/style
/headbodydiv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{getSum}} 个/p/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {getSum() {return this.list.reduce((sum, item) {return sum item.num}, 0)}}})/script
/body/htmlcomputed 与 method 的区别
computed 计算属性
**作用**封装了一段对于数据的处理求得一个结果。
语法 ① 写在 computed 配置项中 ② 作为属性直接使用 → this.计算属性 {{ 计算属性 }}
methods 方法
**作用**给实例提供一个方法调用以处理业务逻辑。
语法 ① 写在 methods 配置项中 ② 作为方法需要调用 → this.方法名( ) {{ 方法名() }} 事件名“方法名”
二者的区别
缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算 → 并再次缓存 而方法却是每次获取值的时候都会重新计算
示例
使用 computed 方法
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}/style
/headbodydiv idapph3小黑的礼物清单span?/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ totalCount }} 个/pp礼物总数{{ totalCount }} 个/pp礼物总数{{ totalCount }} 个/p/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},methods: {f_totalCount() {let total this.list.reduce((sum, item) sum item.num, 0)console.log(methods方式获取值被触发了1次);return total}},computed: {totalCount() {let total this.list.reduce((sum, item) sum item.num, 0)console.log(computed方式获取值被触发了1次);return total}},})/script
/body/html使用 methods 方法
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}/style
/headbodydiv idapph3小黑的礼物清单span?/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ f_totalCount() }} 个/pp礼物总数{{ f_totalCount() }} 个/pp礼物总数{{ f_totalCount() }} 个/p/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},methods: {f_totalCount() {let total this.list.reduce((sum, item) sum item.num, 0)console.log(methods方式获取值被触发了1次);return total}},computed: {totalCount() {let total this.list.reduce((sum, item) sum item.num, 0)console.log(computed方式获取值被触发了1次);return total}},})/script
/body/html计算属性完整写法
计算属性默认的简写只能读取访问不能 “修改”。
如果要 “修改” → 需要写计算属性的完整写法。 如果修改 computed 的值而其没有 set 函数的话就会报错 例子 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp姓input typetext v-modelfirstNamebr名input typetext v-modellastNamebrp姓名{{fullName}}/pbutton clickchangeName修改姓名/button/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 迪,lastName: 幻},computed: {fullName: {get() {return this.firstName this.lastName},set(value) {this.firstName value.slice(0, 1)this.lastName value.slice(1)}}},methods: {changeName() {this.fullName 迪小幻}}})/script
/body/html**总结**如果你的计算属性不止想拿来进行读取操作的话那么加上一个set方法就可以实现数据的读取与改写
watch 侦听器监视器
作用监视数据变化执行一些 业务逻辑 或 异步操作。
语法 ① 简单写法 → 简单类型数据直接监视 ② 完整写法 → 添加额外配置项
简单写法 → 简单类型数据直接监视
data: { words: 苹果,obj: {words: 苹果}
},
watch: {
// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。
},对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。}
}示例
简单数据类型 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style
/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelwords/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript src./vue.js/scriptscript src./axios.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {words: ,// obj: {// words: // }},watch: {words(newVal, oldVal) {console.log(words 的值变化了, newVal: newVal, oldVal: oldVal);}}})/script
/body/html复杂数据类型: !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style
/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript src./vue.js/scriptscript src./axios.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {words: ,obj: {words: }},watch: {words(newVal, oldVal) {console.log(words 的值变化了, newVal: newVal, oldVal: oldVal);},obj.words(newVal, oldVal) {console.log(obj.words 的值变化了, newVal: newVal, oldVal: oldVal);}}})/script
/body/html完整写法 → 添加额外配置项
试想一下会有这样一个情景如果我们重新选择一门语言的话那翻译的内容也会发生相应的改变因此我们就不能仅仅只检测文本框内容是否发生了改变还应该检测语言的选择是否发生了变化因此我们就需要侦听器的完整写法来实现这一功能
侦听器完整写法
data: {obj: {words: 苹果,lang: italy},},watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视immediate: true, // 是否立刻执行一次handlerhandler(newValue) {console.log(newValue)}}}deep: true 对复杂类型深度监视 immediate: true 初始化立刻执行一次handler方法
因此我们改良后可以得到以下的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style
/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselect v-modelobj.langoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {words: ,obj: {words: 迪幻,lang: italy}},watch: {obj: {deep: true,immediate: true,handler(newVal, oldVal) {console.log(被修改了, newVal: newVal, oldVal: oldVal);}}}})/script
/body/htmlcdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js
相关文章
本专栏上一章 Vue.js - Vue 的安装 以及 常用的 Vue 指令 【0基础向 Vue 基础学习】
