2021-7-11 Vue的计算属性和侦听器

计算属性是为了让页面显示更加简洁，基于data数据进行处理的方法，以下为实例

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <input type="text" name="" v-model="msg">
  {{reverseMsg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用

var vm=new Vue({
    el:'#app',
    data:{
     msg:''
    },
  computed:{
     reverseMsg:function(){
         return this.msg.split('').reverse().join('');//split分割，reverse反转，join拼接
     }
  }
});
</script>
</body>
</html>
View Code

 计算属性和方法的区别：

计算属性是有缓存的，只要data数据不发生改变，会直接调用上次计算好的值（节省时间，节约性能）

方法则是没有缓存，不管data是否发生改变，都会重新执行一次方法

 

侦听器和计算属性有点类似，但是侦听器常用于异步或者开销较大的计算，以下为侦听器实例

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <input type="text" name="" v-model="msg">
    <input type="text" name="" v-model="msg1">
  {{msg2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用

var vm=new Vue({
    el:'#app',
    data:{
     msg:'',
     msg1:'',
     msg2:''
    },
  watch:{
     msg:function(val){
         this.msg2=val+' '+this.msg1;
     },
     msg1:function(val){
         this.msg2=this.msg+' '+val;
     }
  }
});
</script>
</body>
</html>
View Code

 

 

使用侦听器来模拟异步返回的效果

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <input type="text" name="" v-model.lazy="msg">
  {{tip}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用

var vm=new Vue({
    el:'#app',
    data:{
     msg:'',
     tip:''
    },
    methods:{
     checkName:function(msg){
         var that=this;
         setTimeout(function(){
             if (msg=='admin') {
               that.tip='已存在';
           }
           else{
               that.tip='成功';
        }
         },2000); 
      }
  },
    watch:{
        msg:function(val){
            this.checkName(val);//内部调用时记得加this
            this.tip='正在验证';
        }
    }
});
</script>
</body>
</html>
View Code

 

posted @ 2021-07-11 21:30  月长生  阅读(37)  评论(0)    收藏  举报