Vue的计算属性

常见计算属性：

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="appdemo">
			<h2>{{message}}</h2>
			<h3>{{firstname+' '+lastname}}</h3>
			<h4>{{getfullname()}}</h4>
			<h5>{{fullName}}</h5>
		</div>
		
		<script src="js/v2.6.10/vue.js"></script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#appdemo",
				data:{
					message:'你好',
					firstname:'Lebron',
					lastname:'james',
					books:[
						{id:1,name:'我是谁1',price=1},
						{id:2,name:'我是谁2',price=10},
						{id:3,name:'我是谁3',price=100},
						{id:4,name:'我是谁4',price=1000}
					],
				},
				methods:{
					getfullname(){
						return this.firstname+this.lastname
					}
				},
				//计算属性（在命名的时候最好是属性的名称,计算属性有缓存）
				computed:{
					fullName:function(){
						return this.firstname+this.lastname;
					},
					sumprice:function(){
						let result =0;
						for(let i=0;i<this.books.length;i++){
							result+=this.books[i].price
						}
						return result;
					},
				}
			})
		</script>
		
	</body>
</html>
posted @ 2021-12-10 23:08  Yaoteng  阅读(101)  评论(0)    收藏  举报