2021-7-11 Vue的计算属性

时间:2021-07-11
本文章向大家介绍2021-7-11 Vue的计算属性，主要包括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是否发生改变，都会重新执行一次方法

原文地址：https://www.cnblogs.com/WH5212/p/14999741.html

随机文章
Javascript知识点必读
最近更新