计算属性

最新推荐文章于 2023-08-23 10:37:55 发布

drunk喵咪

最新推荐文章于 2023-08-23 10:37:55 发布

阅读量2.1w

点赞数 6

分类专栏： Vue 文章标签：计算属性

本文链接：https://blog.csdn.net/jdrunk/article/details/102670513

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、什么是计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。
作用：1）减少模板中的计算逻辑
2）数据缓存。当我们的数据没有变化时，不在执行计算的过程
3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据
2、计算属性和方法
值不是直接渲染到页面，也是通过计算之后再渲染到页面，可以使用计算属性computed
1）methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！
2）计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。
3、修改计算属性的值
直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.在computed中定义get和set方法，在修改计算属性中的值

<template>
    <div class="compute">        
        <p>修改计算属性的值</p>
        <h4>num: <span v-text="num"></span></h4>
        <h4>计算属性num2: <span v-text="num2"></span> </h4>
        <button class="btn" @click="change">改变计算属性的值</button>
    </div>
</template>
<script>
export default {
    name:'compute',
    data(){
        return{           
            num:100
        }
    },
    computed:{
        // num2不是函数
        num2:{
            // 当计算属性要修改时先触发set方法
            // 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
            get:function(){
                return this.num*2-10
            },
            set:function(val){
                this.num = val;
                console.log('val',val)
            }
        }
    },
    methods:{       
        change(){
            // 直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.
            this.num2=60;
        }
    }
}
</script>
<style lang="less" scoped>
.compute{
    .btn{
        width: 130px;
        height: 37px;
        background: #fff;
        border-style: none;
        border: 1px solid #333;
        border-radius: 4px;

        &:hover{
            background: #42c5e6;
            color: #fff;
        }
    }
}
</style>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- <p>{{message}}</p>
		//反转之后显示
		<p>{{ message.split("").reverse().join("") }}</p>
		<p>{{ reverseMsg() }} </p>
		<p>{{ reverseMsg() }} </p>
		<p>{{ reverseMessage }} </p>
		<p>{{ reverseMessage }} </p> -->
		
		<!-- <ul>
			<li v-for="item in users.filter(u=>u.gender=='male')">
				{{item}}
			</li>
		</ul> -->
		
		<button @click="gender='male'">男生</button>
		<button @click="gender='female'">女生</button>
		<ul>
			<li v-for="item in userFilter">
				{{item}}
			</li>
		</ul>


	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				message:"hello world",
				users:[
					{id:1,name:"terry",gender:"male"},
					{id:2,name:"larry",gender:"male"},
					{id:3,name:"vicky",gender:"female"},
					{id:4,name:"lucy",gender:"female"},
					{id:5,name:"tom",gender:"male"},
				],
				//默认值，默认情况显示男生
				gender:"male"
			},
			//computed是一个计算属性，调用里面的方法不用加过好，直接用reverseMessage
			computed:{
				reverseMessage(){
					console.log("computed-reverseMessage"+Math.random())
					return this.message.split("").reverse().join("")
				},
				//过滤
				//u=>u.gender===this.gender  箭头函数
				userFilter(){
				//当this.users以及this.gender发生变化的时候，计算属性会重新执行计算出新的结果然后渲染到页面中。
					return this.users.filter(u=>u.gender===this.gender)
				}
			},
			created(){
				setTimeout(()=>{
					this.message += "hello world"
				},2000)
			},
			methods:{
				reverseMsg(){
					console.log("methods-reverseMsg"+Math.random())
					return this.message.split("").reverse().join("")
				}
			}
		})
	</script>
</body>
</html>

drunk喵咪

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
计算属性

methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！！！计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫