• Vue--1.6计算属性

    概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

    语法：

    1）声明在computed配置项中，一个计算属性对应一个函数。

    2）使用起来和普通属性一样使用{{计算属性名}}

    1. computed:{
    2.     计算属性名(){
    3.         一段代码逻辑（计算逻辑）
    4.         return 结果
    5.     }
    6. }

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8.   <style>
    9.     table tr td{
    10.         border:2px solid #000;
    11.         width:50px;
    12.         text-align:center;
    13.     }
    14.   </style>
    15. </head>
    16. <body>
    17. <div id="app">
    18.     <h3>礼物清单</h3>
    19.     <table style="border:2px solid #000;">
    20.         <tr>
    21.             <td>名字</td>
    22.             <td>数量</td>
    23.         </tr>
    24.         <tr v-for="(item,index) in list" :key="item.id">
    25.             <td>{{item.name}}</td>
    26.             <td>{{item.num}}个</td>
    27.         </tr>
    28.     </table>
    29.     <p>礼物总数：{{totalCount}}个</p>
    30. </div>
    31. </body>
    32. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    33. <script>
    34.     const app=new Vue({
    35.         el:'#app',
    36.         data:{
    37.             list:[
    38.                 {id:1,name:'篮球',num:1},
    39.                 {id:2,name:'玩具',num:2},
    40.                 {id:3,name:'铅笔',num:5}
    41.             ]
    42.         },
    43.         computed:{
    44.             totalCount(){
    45.                 let total=this.list.reduce((sum,item)=>sum+item.num,0)
    46.                 return total
    47.             }
    48.         }
    49.     })
    50. </script>
    51. </html>
    computed计算属性 vs methods方法

    computed计算属性:

    作用：封装了一段对于数据的处理，求得一个结果。

    语法：

    1）写在computed配置项中

    2）作为属性，直接使用->this.计算属性{{计算属性}}

    优点：缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算->并再次缓存

    methods方法：

    作用：给实例提供一个方法，调用以处理业务逻辑。

    语法：

    1）写在methods配置项中

    2）作为方法，需要调用->@click="方法名"

    计算属性默认的简写，只能读取访问，不能“修改”。如果要“修改”，需要写计算属性完整的写法。

    1. computed:{
    2.     计算属性名:{
    3.         get(){
    4.             一段代码逻辑（计算逻辑）
    5.             return 结果
    6.         },
    7.         set(value){
    8.             一段代码逻辑（修改逻辑）
    9.         },
    10.     }
    11. }
    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8.   <style>
    9.     table tr td{
    10.         border:2px solid #000;
    11.         width:50px;
    12.         text-align:center;
    13.     }
    14.   </style>
    15. </head>
    16. <body>
    17. <div id="app">
    18.     姓<input type="text" v-model="firstName">+名<input type="text" v-model="lastName"><span>{{fullName}}</span>
    19.     <br>
    20.     <button @click="changeName">改名卡</button>
    21. </div>
    22. </body>
    23. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    24. <script>
    25.     const app=new Vue({
    26.         el:'#app',
    27.         data:{
    28.             firstName:'刘',
    29.             lastName:'备'
    30.         },
    31.         methods:{
    32.             changeName(){
    33.                 this.fullName='吕小布'
    34.             }
    35.         },
    36.         computed:{
    37.             fullName:{
    38.                 get(){
    39.                     return this.firstName+this.lastName
    40.                 },
    41.                 set(value){
    42.                     this.firstName=value.slice(0,1)
    43.                     this.lastName=value.slice(1)
    44.                 }
    45.             }
    46.         }
    47.     })
    48. </script>
    49. </html>
  • 相关阅读:
    Java+SpringBoot+Vue+MySQL：美食推荐系统的技术革新
    数据库分库分表＜====＞分布式事务
    docker环境部署ruoyi系统前后端分离项目
    kubernetes测试部署一个nginx
    1600*C2. k-LCM (Hard version)（找规律）
    Could not autowire. No beans of ‘UserMapper‘ type found.
    day006--自连接，自然连接及using关键字的使用
    说说你对Rust的了解?
    无损剪切音视频文件的跨平台工具： LosslessCut | 开源日报 0908
    pandas时间序列之 pd.to_datetime()
  • 原文地址：https://blog.csdn.net/weixin_46479909/article/details/132891790