位置: IT常识 - 正文
推荐整理分享Vue项目中如何使用computed计算属性(vue中key),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue项目使用rem,vue项目如何使用debugger,vue在项目中怎么用的,vue项目如何使用os模块,vue项目如何使用service worker,vue项目如何使用os模块,vue项目如何使用os模块,vue项目如何使用service worker,内容如对您有帮助,希望把文章链接给更多的朋友!
1.基本使用 在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)。 1.1 应用场景: 当数据A的逻辑很复杂时,把A这个数据写在计算属性里面 1.2 代码位置: 通过选项computed:{计算属性a:值} 1.3值 带有返回值return的函数
计算属性a和data中的数据用法一样。计算属性在computed中进行定义,无需再在data中定义,在template中直接可进行使用,使用方式与data中定义的数据一样。
<body> <div id='app'> {{msg}} <hr> {{str}} </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el: '#app', data: { msg: 'abc' }, computed: { str: function () { return this.msg } }, methods: { } }) </script></body>2、复杂操作-结合data中数据: 当计算属性b依赖了data中的数据a时,当a变化时,b会自动变化。这也是在开发中通常用到的情况。比如在购物的时候,下某一订单时,每选择一件商品(对应data中的数据a),合计费用(对应计算属性b)就会跟着变化。
下方的例子即模拟上方的效果:
<body> <div id='app'> <h2>总价格:{{totalPrice}}</h2> </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el: '#app', data: { books: [ { id: 1000, name: 'Linux编程之美', price: 50 }, { id: 1001, name: 'Java疯狂讲义', price: 60 }, { id: 1002, name: '深入理解计算机原理', price: 80 }, { id: 1003, name: '操作系统', price: 30 }, { id: 1004, name: '数据结构导论', price: 60 }, ] }, computed: { totalPrice(){ let result=0; for(let i=0;i<this.books.length;i++){ result +=this.books[i].price; } return result } }, methods: { } }) </script></body>3、计算属性写法演变: 3.1计算属性的setter和getter
computed:{//computed里面是大括号,本身就是对象。}① 完整的计算属性写法:属性+方法
computed:{ //定义属性 totalPrice:{ //totalPrice 属性对应的是对象,不是字符串。对象就会有方法。 //该属性对应的set方法和get方法 //计算属性一般是没有set方法的,是只读属性 //【此处set测试失败 没有出现预期效果】 set:function(newValue){ console.log('get方法调用啦', newValue); }, get:function(){ console.log('计算属性完整写法:计算啦'); let result = 0; for (let i = 0; i < this.books.length; i++) { result += this.books[i].price; } return result } }}② 计算属性一般只有get方法,是只读属性。所以一般写法为:
computed: { totalPrice: function () { //后面对应的即为get方法。totalPrice就是一个属性,调用时采用属性调用的方式,区别于方法调用() console.log('计算属性一般写法:计算啦'); let result = 0; for (let i = 0; i < this.books.length; i++) { result += this.books[i].price; } return result }},③ 语法糖—简化写法:
computed: { totalPrice() { console.log('计算属性语法糖写法:计算啦'); let result = 0; for (let i = 0; i < this.books.length; i++) { result += this.books[i].price; } return result } },上一篇:当下最强的 AI art 生成模型 Stable Diffusion 最全面介绍(最强alpha什么意思)
下一篇:前端实战|React18极客园——布局模块(useRoutes路由配置、处理Token失效、退出登录)(前端实战开发)
友情链接: 武汉网站建设