vue2.X computed 计算属性
2023-09-11 14:15:30 时间
需求:数据msg值为12345,我们现在需要反向显示成54321。
1.在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> {{msg}} <hr> {{ msg.split('').reverse().join('') }} </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ msg:'12345' } }); </script> </body> </html>
效果图:
Vue提供computed的方式。例如:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> {{msg}} <hr> {{reMsg}} </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ msg:'12345' }, computed:{ reMsg:function(){ return this.msg.split('').reverse().join('') } } }); console.log(vm.reMsg); </script> </body> </html>
效果图:
同样的可以达到效果!
注:
但是这边的reMsg是不能被修改的!! 也就是修改的时候他不会按照我们js给的规则去向反显示,因为默认只有getter,我们可以提供一个setter:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> {{msg}} <hr> {{reMsg}} </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ msg:'12345' }, computed:{ reMsg:{ get:function(){ return this.msg.split('').reverse().join('') }, set:function(value){ this.msg = value; //最后修改了msg } } } }); console.log(vm.reMsg = 'abcde'); //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示 </script> </body> </html>
效果图:
.
相关文章
- Vue的computed(计算属性)使用实例之TodoList
- Vue_(组件)计算属性
- Image.FrameDimensionsList 属性备注
- 计算属性
- 代码库-读取属性文件中的值
- CSS 的class属性居然可以并(有点像并,有点像与)操作
- 2015.7.6js-03(操作属性的方法)
- 《从零开始学Swift》学习笔记(Day 34)——静态属性是怎么回事?
- CSS3属性text-overflow(省略符)实战开发详解
- Open3D 获取mesh属性
- Flex布局里的align-self属性
- TypeScript里get属性的实现
- iOS swift 设置电量 计算属性实例
- 微软ASP.NET网站部署指南(4):配置项目属性
- 无法识别的属性“targetFramework”。请注意属性名称区分大写和小写。错误解决的方法
- Swift编程语言学习9—— 存储属性和计算属性
- WPF教程:依赖属性
- Vue中计算属性computed与method的区别
- 【vue】vue自定义指令、计算属性、过滤器_06
- Vue3中computed计算属性函数