模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值,使用计算属性时和data中的数据使用方式一致

<div id="app">

<!-- 当多次调用 cfn计算属性时只要里面的 num值不改变,它会把第一次计算的结果直接返回直到data中的num值改变 计算属性才会重新发生计算 -->

<div>{{ cfn }}</div>

<div>{{ cfn }}</div>

<!-- 调用methods中的方法的时候  他每次会重新调用 -->

<div>{{ fn() }}</div>

<div>{{ fn() }}</div>

</div>

<script type="text/javascript">

const vm = new Vue({

el: '#app',

data: {

num: 10

},

// 方法

methods: {

fn() {

console.log('methods')

return this.num

}

},

// 计算属性

computed: {

cfn() {

console.log('computed')

return this.num

}

}

})

</script>

注:只要依赖的数据源不发生改变,我就调用1次,其它使用缓存

vue计算属性computed的更多相关文章

  1. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  4. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  5. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  7. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  8. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  9. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

随机推荐

  1. 使用Git向Gitee仓库推送项目的完整流程

    1.安装git 如果没有特殊需求,直接下一步即可:安装链接如下:Git - Downloads (git-scm.com) 2.在Gitee上新建仓库,初始化仓库 3.保存仓库的链接,如下图标记所示 ...

  2. PolarDB-X 如何做分布式数据库热点分析

    简介: PolarDB-X 是一款计算存储分离的云原生分布式数据库,在PolarDB-X 2.0的AUTO模式下,数据库会按照表的主键自动Hash分区,将数据均匀的分布到各个数据节点中,最理想的情况是 ...

  3. win10 uwp 简单制作一个 Path 路径绘制的图标按钮

    本文告诉大家在 UWP 或 WinUI 3 里面如何简单制作一个由 Path 几何路径图形绘制的图标按钮 先在资源里面定义按钮的样式,重写 Template 属性,通过在 Template 里面放入 ...

  4. VisualStudio 调试时会不断刷新 WPF 应用渲染

    在 VisualStudio 附加调试和没有用 VisualStudio 附加调试时,对应用程序是有不同的影响,如 VisualStudio 设计器将会在附加调试 WPF 应用的时候,不断刷新 WPF ...

  5. VGA显示文字

    VGA显示文字 VGA字符显示的原理 把要显示的字符转换成字符点阵,然后编码存储,着色的部分为1,其它为0.然后在VGA上输出显示. 字符点阵生成软件: https://www.zhetao.com/ ...

  6. vue通过input选取apk文件上传,显示进度条

    <template> <div class=""> <form action="" method="post" ...

  7. 【人脸识别】OpenCV获取自己的图像

    思路:先获取10000张自己的图像,然后通过CNN神经网络进行学习. 第一步:先获取自己的脸的数据.如何做? 代码如下: import cv2 import os import sys import ...

  8. sqli-labs-master 第十一关

    本关为POST请求: 输入:admin'# 密码:随意 爆出当前数据库: 用户名:payload1:admin' and extractvalue(1,concat(0x7e,database(),0 ...

  9. 基于改进MFCC特征和卷积递归神经网络的心音分类

    具体的软硬件实现点击http://mcu-ai.com/MCU-AI技术网页_MCU-AI人工智能 心音分类在心血管疾病的早期发现中起着至关重要的作用,特别是对于小型初级卫生保健诊所.尽管近年来心音分 ...

  10. 移动端termux安装kali

    1.相关准备一部安卓手机,termux,NVAC,浏览器2.安装kali首先进入kali的官网选择文档找到Android手机上的kali找到NetHunter-Rootless找到kali安装命令:t ...