vue之计算属性

计算属性介绍

  有时我们需要对mustache语法差值显示的一些data中的数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示,这时使用计算属性(computed)是比较方便的。
  代码简介:我们需要将一个人的名字的两部分连接起来,代码中显示了四种连接两个名字的方式,
第一种方式:变量名相加,然后显示;
第二种方式:变量显示内容相加;
第三种方式:通过函数方式直接获得相加结果;
第四种方式:通过计算属性获得相加生成的变量,然后显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<h2>{{firstName +' ' + lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<h2>{{getFullName()}}</h2>
	<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				firstName:'A',
				lastName:'B'				
			},
			methods:{
				getFullName:function(){
					return this.firstName + ' '+ this.lastName
				}
			},
			computed:{
				fullName:function(){
					return this.firstName + ' '+ this.lastName
				}
			}
		})
</script>
</body>
</html>

计算属性实例

  通过计算属性方式,对对象(书)的属性(价格)的进行计算。
  代码中,通过计算属性求得了四本书的价格总和。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<h2>总价格:  {{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				books:[
					{id:110,name:'Unix编程艺术',price:119},
					{id:111,name:'代码大全',price:110},
					{id:112,name:'操作系统',price:100},
					{id:113,name:'数据结构',price:87},					
				]
			},
			computed:{
				totalPrice:function(){
					let result = 0 //let定义变量为块作用域
					for (let i=0;i<this.books.length;i++){
						result +=this.books[i].price
					}
					return result
				}
			}
		})
</script>
</body>
</html>

你可能感兴趣的:(Vue)