vue学习笔记-12-计算属性

最新推荐文章于 2022-05-23 17:08:47 发布

笑道三千

最新推荐文章于 2022-05-23 17:08:47 发布

阅读量191

点赞数

分类专栏： # vue基础文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108220999

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一，计算属性

在这里插入图片描述
举个例子，如果要实现字符串的反向输出，需要这样写：

<div>{{msg.split('').reverse().join('')}}</div>

这样一来，模板里面的字符串就太复杂了，于是就想把它放到专门的地方处理，让html只起页面结构的作用。
也就是：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="app">
			<div >{{msg}}</div>
			<div >{{reverseString}}</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			
			var vm=new Vue({
				el: "#app",
				data:{
					msg:'hello'
				},
				computed:{
					reverseString:function(){
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

可以注意到：计算属性是基于data中的数据进行处理的！！所以这里需要用this。

二，计算属性compute和method的区别

主要的区别是计算属性是基于它的data进行了缓存，第二次使用时，就可以直接使用缓存中的结果了。而不需要像method一样每次都执行函数。

三，计算属性的set和get

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter,这时候，计算属性不是个函数，而是个对象的写法了：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...