计算属性computed · vue

# computed ~~~ computed 计数做一些复杂的操作 ~~~ 模板内的表达式非常便利，但是设计她们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过众难以维护计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时他们才会重新求值。methods 不缓存 # 代码： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>{{count+1}}</p> <p>{{msg}}</p> <p>{{upMsg}}</p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue=new Vue({ el:'#app', data:{ msg:'hello vue', count:0 }, computed:{ //computed 计数做一些复杂的操作 upMsg:function (){ return this.msg.toUpperCase()+'adsfsfsd'; //toUpperCase() 小写转大写 } } }) ~~~ ![](https://img.kancloud.cn/fc/aa/fcaac991717964132fc4c16822ea1698_1099x602.png) ![](https://img.kancloud.cn/1d/1a/1d1a450e2fae6a6b555cb4309644b29c_1343x811.png)