vue基础---04计算属性
00.计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 一般情况下写法:这种每次都会计算，效率低 --> <h1>{{firstname+lastname}}</h1> <!-- 计算属性 --> <h1>{{fullname}}</h1> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ firstname:"张", lastname:"三" }, computed:{//计算属性 fullname:function(){ return this.firstname+this.lastname } } }) </script> </body> </html>
01.列表渲染和计算属性混合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 一般情况下写法:这种每次都会计算，效率低 --> <h1>{{firstname+lastname}}</h1> <!-- 计算属性 --> <h1>{{fullname}}</h1> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ firstname:"张", lastname:"三" }, computed:{//计算属性 fullname:function(){ return this.firstname+this.lastname } } }) </script> </body> </html>
