计算属性

_XinXinM_

于 2021-01-10 01:45:40 发布

阅读量522

点赞数

本文链接：https://blog.youkuaiyun.com/binbinhxx/article/details/112422150

版权

博客介绍了计算属性相关内容。当表达式计算逻辑复杂时，使用计算属性可让模版内容更简洁，还提及了计算属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模版内容更加简洁
2.计算属性的用法

computed: {
	reversedMessage: function(){
		return this.msg.split('').reverse().join('')
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
  <div>{{msg}}</div>
  <div>{{reverseString}}</div>
</div>
  <script src="vue.js"></script>
  <script>
    /*计算属性*/ 
    var vm = new Vue({
      el: '#app',
      data: {
        msg:"Hello"
      },
      // 计算属性其实是基于data中的属性来做处理的，
      // 数据如果发生变化，计算属性最终计算的结果也是跟着变化的
      computed:{
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述