Vue项目中如何使用computed计算属性(vue中key)

编辑：rootadmin

Vue项目中如何使用computed计算属性 computed:

推荐整理分享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> Vue项目中如何使用computed计算属性(vue中key)

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 } },

本文链接地址:https://www.jiuchutong.com/zhishi/299992.html 转载请保留说明！

上一篇：当下最强的 AI art 生成模型 Stable Diffusion 最全面介绍(最强alpha什么意思)

下一篇：前端实战｜React18极客园——布局模块（useRoutes路由配置、处理Token失效、退出登录）(前端实战开发)