深入理解Vue.js计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45719052/article/details/126195284

本文详细探讨了Vue.js中的计算属性，包括其工作原理、如何使用以及在前端开发中的重要性。通过实例，展示了如何创建和应用计算属性来动态地计算视图数据。

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

vue计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<p v-for="item in res">{{item.name}}:{{item.marks}}</p>
			<p>总分：{{totalmarks}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					res: [{
							name: "english",
							marks: 90
						},
						{
							name: "math",
							marks: 80
						},
						{
							name: "history",
							marks: 70
						}
					]
				},
				//计算属性
				computed: {
					//通过一个方法得出一个数据 方法名就是计算后的数据变量名  方法的返回值就是这个数据的值
					//计算属性会对依赖到的所有数据进行监听 监听的数据发生变化  计算方法会重新执行					totalmarks:function(){
					let total = 0;
					for (let i = 0; i < this.res.length; i++) {
						total += parseInt(this.res[i].marks)
					}
					return total
				}
			}

			})
			// computed和watch 的区别
			// 1.computed必须有返回值  watch不一定
			// 2.watch只监听一个数据  computed 可以监听多个
			// 3.computed 有缓存
		</script>
	</body>
</html>

vue 计算属性

vue计算属性