微信登录

Html接受数据{{}} - computed、methods

对比项 computed methods
调用方法 {{xxx}} {{xxx()}}
缓存 有 无
使用场景 多次使用 多次调用

computed 只用了一次

  1. <body>
  2.         <div id="app">
  3.             {{ reversedText }}
  4.         </div>
  6.         <script type="text/javascript" src="lib/vue-2.4.0.js"></script>
  7.         <script>
  8.             var vm = new Vue({
  9.                 el: '#app',
  10.                 data: {
  11.                     text: '123,456'
  12.                 },
  13.                 computed: {
  14.                     reversedText: function() {
  15.                         return this.text.split(',').reverse().join(',');
  16.                     }
  17.                 }
  19.             })
  20.         </script>
  21.     </body>

这个输出的结果就是 456,123

methods 用了多次

  1. <body>
  2.         <div id="app">
  3.             {{ reversedText() }}
  4.         </div>
  6.         <script type="text/javascript" src="lib/vue-2.4.0.js"></script>
  7.         <script>
  8.             var vm = new Vue({
  9.                 el: '#app',
  10.                 data: {
  11.                     text: '123,456'
  12.                 },
  13.                 methods: {
  14.                     reversedText: function() {
  15.                         return this.text.split(',').reverse().join(',');
  16.                     }
  17.                 }
  18.             })
  19.         </script>
  20.     </body>

输出的结果也是 456,123