Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器

已于 2022-09-01 11:09:30 修改
阅读量2.4k 收藏 18
点赞数 18
分类专栏： Vue 文章标签： java servlet 前端
于 2022-07-27 18:44:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52499703/article/details/126019459
版权
本文详细介绍了Vue.js中计算属性的基本使用、复杂应用场景，包括多种计算总价的方法，如for循环、Map等。同时，讨论了计算属性的setter和getter，与methods和侦听器的对比，强调了计算属性的缓存优化特性及其在数据变化时的响应策略。
摘要由CSDN通过智能技术生成

🚗个人主页：最好的人啊

🚌系列专栏：HTML/CSS

🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！

 

目录

前言

我们为什么要引用计算属性？

计算属性的基本使用

计算属性的复杂使用 

计算书本的总价的几种方法

第一种  for循环遍历

第二种   for in  循环遍历

第三种  for of  遍历

第四种  foreach   遍历

第五种  Map   遍历

第六种  filter  遍历

第七种   reduce 遍历

第八种   some 遍历

完整代码

计算属性中的set和get

computed 的  getter/setter

计算属性与methods的对比

计算属性与侦听事件

前言

我们为什么要引用计算属性？

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容看起来更加的整洁

例如

<div id="app">
  {
   { message.split('').reverse().join('') }}
</div>2>

计算属性的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>您的firstname:{
   {firstName}}</h2>
			<h2>您的lastname:{
   {lastName}}</h2>
			<h2>您的fullname是从计算属性中得到:{
   {fullName}}</h2>
			<h2>您的fullname是从方法中得到:{
   {getFullName()}}</h2>
			
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						firstName:'zhang',
						lastName:'san'
					}
				},
				methods:{
					getFullName(){
						return this.firstName + this.lastName
					}
				},
				computed:{
    //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
					fullName(){
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

计算属性的复杂使用 

		<div id="app">
			<h2>您的总价:{
   {totalPrice}}</h2>
		</div>

计算书本的总价的几种方法

						books: [	
						{
   id: 110,name: "JavaScript从入门到入土",price: 119},
						{
   id: 111,name: "Java从入门到放弃",price: 80},
						{
   id: 112,name: "编码艺术",price: 99},
						{
   id: 113,name: "代码大全",price: 150},
						]

第一种  for循环遍历

          
                // for循环遍历
                totalPrice(){
                    let total=0;
                    for (let i = 0; i < this.books.length; i++) {
                        total+=this.books[i].price                       
                    }
                    return total
                }
 
            }

第二种   for in  循环遍历


                totalPrice(){
                    let total = 0;
                    for (const item in this.books) {
                        total+=this.books[item].price
                    }
                    return total
                }

第三种  for of  遍历

                
                totalPrice() {
                    let total = 0;
                    for (let index of this.books) {
                        total += index.price
                    }
                    return total
                }

第四种  foreach   遍历

                
                totalPrice(){
                    let total = 0;
                    this.books.forEach(item => {
                        total+= item.price
                    })
                    return total
                }

第五种  Map   遍历

                totalPrice(){
                    let total = 0;
                    this.books.map(item => {
                        total+= item.price
                    })
                    return total
                }

第六种  filter  遍历

                
                totalPrice(){
                    let total = 0;
                    this.books.filter(item => {
                        total+= item.price
                    })
                    return total
                }

第七种   reduce 遍历

                
                totalPric
最低0.47元/天 解锁文章
最好的人啊
关注
专栏目录
vue中的计算属性
weixin_46376652的博客
07-09 2720
1、computed中存储计算属性，要通过已有的属性计算得来，计算属性使用一个对象存储，包含get和set方法；2、计算属性中的get和set方法中的this都是vm；3、计算属性是一个属性，当使用插值语法调用它时，不可以加括号(因为它不是一个方法)第一次调用之后会进行缓存1、初次读取计算属性的时候；2、当get中用到的数据发生改变的时候；当手动修改计算属性时，调用set方法，例：vm.fullName="李-四"确定计算属性只需要调用get方法，而不需要调用set方法手动修改；......
Vue的计算属性
qq_63608386的博客
08-28 1295
vue计算属性
Vue.set 方法原理详解
最新发布
My_wife_QBL的博客
07-04 1919
Vue.set方法用于向响应式对象中添加新的属性，并确保这个新属性是响应式的。target：目标对象或数组。：属性名或数组索引。value：要设置的值。Vue.set方法是Vue响应式系统中的一个重要组成部分，它解决了向响应式对象和数组中添加新属性时的响应式问题。通过深入理解Vue.set方法的原理，开发者可以更好地利用这一特性，构建出更加高效和灵活的Vue应用。希望本文能够帮助你全面理解Vue.set方法的原理，并在实际开发中发挥其最大的价值。
vue计算属性的get和set
weixin_45075981的博客
10-06 3666
<template> <div> <div>性别是：{{getsex}}</div> <button @click="addarr">添加</button> <div>改变name的值 {{getname}}</div> </div> </template> <script> expo.
vue中computed之set和get
放弃不难，但坚持一定很酷！
04-27 4736
b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存 计算的结果，不会多次执行。计算属性中包含了set(获取计算属性)和get(设置计算属性)两个方法(回调函数)get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值。a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化。set回调函数: 监视当前属性值发生改变时调用,更新相关的属性值。a.数据可以进行逻辑处理操作。b.对计算属性中的数据进行监视。
vue（计算属性set和get）
lbs311709000127的博客
11-20 520
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:...
Vue计算属性和侦听属性
qq_54598736的博客
10-11 544
Vue计算属性和侦听属性
Vue计算属性及侦听器
qq_65715980的博客
07-27 354
vue计算属性及侦听器
vue 计算属性和data_详解Vue计算属性和侦听属性
weixin_39800062的博客
12-19 164
作者介绍本期特邀作者：浪里行舟Github博客2600 star作者，专注于前端领域。个人公众号：「前端工匠」，致力于打造适合初中级工程师能够快速吸收的一系列优质文章！01前言一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解，本文主要介绍两者的用法、使用场景及两者的区别。本文的代码请猛戳github博客(https://github.com/ljianshu/Blog/tree/maste...
Vue学习之计算属性、侦听器与过滤器详解
道阻且长
07-11 440
Vue学习之计算属性、侦听器与过滤器详解
Vue 计算属性 get 和set
可控的事情要谨慎，不可控的事情要乐观。
10-08 465
<body> <div id='app'> {{fullName}} </div> <script> var vm = new Vue({ el:"#app", data:{ firstN...
vue之计算属性之get、set
PhilsphyPrgram的博客
12-23 946
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜鸟教程(runoob.com)</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id
vue中计算属性之set和get
tdmbs的博客
04-10 3327
computed计算属性中包含了set和get两个方法（回调函数） get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值 set回调函数:监视当前属性值发生改变时调用,更新相关的属性值 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，否则就是多次调用，但只会计算第一次，其他次调用的计算结果采用缓存的结果。注意，如果某个依赖 (比如非响应式属性) 在该实例...
Vue 计算属性set和get
轻风细雨_林木木
10-22 1375
<template> <div class="hello"> 测试1：<input type="text" v-model="demoData1"> 测试2：<input type="text" v-model="demoData2"> 测试3：<input type="text" v-model="demoData3"> </div> </template> <script>
Vue.set、计算属性（computed）和侦听器（watch）
qq_35915504的博客
05-18 1090
在你的例子中，如果需要在响应式对象中添加一个新的属性并确保这个属性是响应式的（比如在接收到服务器响应后更新对象的 ID），使用 Vue.set 是最合适的。Vue.set：Vue.set 主要用于在已有的响应式对象上添加新的属性，并确保这个新属性同样是响应式的，即它可以被 Vue 的系统追踪并在变化时触发界面更新。在您的例子中，当从服务器接收到新的 id 值并需要更新对象的 id 属性时，我们使用 Vue.set 是因为我们在一个现有的响应式对象上添加一个新属性，并希望这个新属性也是响应式的。
计算属性的set、get
albert48的博客
12-04 292
<!DOCTYPE html> <html> <head> <title</title> <script src="./vue.js"></script> </head> <body> <div id="app">{{fullName}}</div> <s...
Vue3组件计算属性的get和set方法
brucexia的专栏
04-02 1785
在浏览器的控制台中设置计算属性namePrice的值为“空调 5900元”，按回车键，可以发现计算属性的内容变成了“空调 5900元”，效果如图3-8所示。计算属性中的每一个属性都对应一个对象，对象中包括get和set方法，分别用来获取计算属性和设置计算属性。提示：通常情况下，get()方法需要使用return返回内容。而set()方法不需要，它用来改变计算属性的内容。默认情况下是不能直接修改计算属性的，如果需要修改计算属性，这时就需要提供一个set方法。
Vue官方文档(4):带set函数的计算属性
amadeus_liu2的博客
06-28 320
vue
Vue.js深入浅出：计算属性computed与监听器watch实战解析
"Vue.js 中的计算属性 computed、事件处理及监听器 watch 的使用方法" 在 Vue.js 中，计算属性 (computed)、事件处理和监听器 (watch) 是非常重要的概念，它们帮助我们处理数据的动态变化以及响应用户交互。下面将...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值