vue-计算属性

一、基本用法

 

　　计算属性也是用来是存储数据的，但是具有以下几个特点：

  1. 数据可以进行逻辑处理操作。
  2. 对计算属性中的数据进行监视。

 

二、代码实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue计算属性</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11 
12         //vue实例的挂载目标
13         el:'#hello',
14 
15         //data用来存储数据
16         data:{  //普通属性
17           msg:'欢迎来到王者荣耀'
18         },
19         //vue计算属性
20         computed:{ //计算属性
21           msg2:function(){  //get函数
22             return '欢迎来到2048';
23           },
24           reverseMsg:function(){
25             //依赖于msg，根据msg计算得来，监视msg(随着msg改变而改变)
26             return this.msg.split('').reverse().join('');
27           }
28         },
29 
30         //methods用来存储方法
31         methods:{
32           update(){
33             this.msg='Welcome to The glory of the king';
34           }
35         },
36 
37       })
38     }
39   </script>
40 </head>
41 <body>
42 <div id="hello">
43   <!-- 基本用法 -->
44   <h1>{{msg}}</h1>
45   <!-- 计算属性 -->
46   <h1>{{msg2}}</h1>
47   <h1>{{reverseMsg}}</h1>
48   <button @click='update'>修改msg值</button>
49 
50 </div>
51 </body>
52 </html>

 

三、效果展示

 

 

 

 

 

 

 

 

 

 

 

posted @ 2021-08-26 14:57  AnnLing  阅读(537)  评论(0)    收藏  举报