《Vue.js前端开发实战（慕课版第2版）》课件 第4--6章 计算属性与监听属性、样式绑定、事件处理.ppt

计算属性与监听属性

计算属性监听属性AI辅助编程

计算属性什么是计算属性getter和setter计算属性缓存

什么是计算属性computed选项divid=apppQQ电子邮箱为：{{str}}/pp邮箱中的QQ号码为：{{intercept}}/p/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({data(){return{str:4006751066@}},computed:{intercept(){returnthis.str.substr(0,this.str.indexOf(@));}}}).mount(#app);/script

什么是计算属性应用计算属性统计购物车中的商品总价。实例

getter和setterdivid=appspan{{fullname}}/span/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({data(){return{surname:陈,lastname:小洛}},computed:{fullname:{get(){returnthis.surname+this.lastname;}}}}).mount(#app);/script

divid=appspan{{fullname}}/span/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({data(){return{surname:陈,lastname:小洛}},computed:{fullname:{get(){returnthis.surname+this.lastname;},set(value){this.surname=value.slice(0,1);this.lastname=value.slice(1);}}}}).mount(#app);vm.fullname=袁小志;/script

计算属性缓存divid=appspan{{fullname()}}/span/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({data(){return{surname:迈克尔,lastname:乔丹}},methods:{fullname:function(){returnthis.surname+·+this.lastname;}}}).mount(#app);/script

监听属性什么是监听属性deep选项

应用监听属性实现小时数和分钟数之间