Vue入门之计算属性和监听器

六.计算属性和监听器
6.1计算属性 computed
6.1.1存在问题
插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:

 {{ message.split('').reverse().join('') }}

6.1.2基本使用
Vue计算属性computed就是用来处理复杂逻辑的. 当data区域的数据变更是,将进行自动计算.

案例：字符串倒排

 

 

   
   
   
   
   


   

       {{showMessage}}
   

6.1.3computed和methods区别

 

• 计算属性，用于实时计算，只要数据发生了更改才计算。缓存计算结果。
• 方法，每次调用都执行

 

   
   
   
   
   


   

       

 

       

计算属性

       {{showCount}}          
       {{showCount}}          
 
       

普通方法

       {{showCount2()}}
       {{showCount2()}}
 
   

6.1.4案例：购物车

 

 

 

   
   
   
   
   
   


   

       
           
               
               
               
               
               
           
           
               
               
               
               
               
           
           
               
               
           
       

编号	标题	单价	购买数量	小计
{{index+1}}	{{book.title}}	{{book.price}}	-                    {{book.count}}                    +	{{book.price * book.count}}
			总价：{{totalPrice}}

   

6.1.5高级使用

 

• 计算属性提供了setter方法对属性进行修改

 

           }
       },
   })

案例：拆分姓名 （第一版）
 

 

   
   
   
   
   


   

       请输入姓名：  

 

       姓：{{firstname}}

       名：{{secondname}}

   

6.2监听器 watch

 

6.2.1什么是监听器

监听数据的变化

 

   })

6.2.2基本语法

• 案例：拆分姓名 （第二版）

 

   
   
   
   
   


   

       请输入姓名：  

 

       姓：{{firstname}}

       名：{{secondname}}

   

 

6.2.3高级使用：监听对象属性

• 案例：拆分姓名 （第三版）

 

   
   
   
   
   


   

       请输入姓名：  

 

       姓：{{firstname}}

       名：{{secondname}}