计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器

最新推荐文章于 2024-04-16 21:42:12 发布

小草dym

最新推荐文章于 2024-04-16 21:42:12 发布

阅读量671

点赞数

本文链接：https://blog.csdn.net/qq_39368007/article/details/105398563

版权

计算属性

1. 为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2. 计算属性的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    
    /*
      计算属性
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao'
      },
      computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的

方法不存在缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      computed: {
        reverseString: function(){
          console.log('computed')
          // return this.msg.split('').reverse().join('');
          var total = 0;
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          return total;
        }
      }
    });
  </script>
</body>
</html>

侦听器

1. 侦听器的应用场景 数据变化时执行异步或开销较大的操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>名：</span>
      <span>
        <input type="text" v-model='firstName'>
      </span>
    </div>
    <div>
      <span>姓：</span>
      <span>
        <input type="text" v-model='lastName'>
      </span>
    </div>
    <div>{{fullName}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
        fullName: 'Jim Green'
      },
      watch: {
        firstName: function(val) {
          this.fullName = val + ' ' + this.lastName;
        },
        lastName: function(val) {
          this.fullName = this.firstName + ' ' + val;
        }
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>名：</span>
      <span>
        <input type="text" v-model='firstName'>
      </span>
    </div>
    <div>
      <span>姓：</span>
      <span>
        <input type="text" v-model='lastName'>
      </span>
    </div>
    <div>{{fullName}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
      },
      computed: {
        fullName: function(){
          return this.firstName + ' ' + this.lastName;
        }
      }
    });
  </script>
</body>
</html>

小草dym

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器

计算属性1. 为何需要计算属性？表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 2. 计算属性的用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>&lt...
复制链接

扫一扫