uni-app学习(九)：computed

computed:

1.定义

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。

注：计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

2.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

如下代码，可以在computed方法进行判断更新name 的值

export default {name: '123',computed:{name(){if (name =='123'){return  name = '首页';}else{return name = '123';}},},

<view>{{name}}</view>

3.computed和methods的区别：

先来上个demo，计算面积。输入长和宽获取面积

<template><view><view class="inputView">长度:<input v-model="length" type="text"></input></view><view class="inputView">宽度:<input v-model="width" type="text"></input></view><view class="inputView">面积:<input v-model="areas" type="text"></input></view></view>
</template><script>export default {onLoad(res) {uni.setNavigationBarTitle({title: res.title + '测试'})},data() {return {length: '',width: ''}},computed: {areas: function() {console.log('调用computed')return this.length * this.width}},methods: {}}
</script><style lang="scss">.inputView {display: flex;width: 100%;height: 80rpx;margin: 50rpx auto;line-height: 80rpx;input {margin: 15rpx 15rpx;width: 200rpx;height: 30rpx;border: 1rpx solid #333333;}}
</style>

此时，只要长度和宽度的数值任何一个改变，面积就会改变。也就是说使用computed会自动执行计算函数，计算出面积。

如果放在methods，则需要一个方法调用回去到面积。methods的方法就不贴了，太简单了。

使用computed时发现如果数值没有发生改变，就不会调用。

所以总结如下：

computed直接以对象属性方式调用，不需要加括号，且有缓存的机制；
methods调用时才会执行，没有缓存机制，调用几次会执行几次；
computed是一个属性，里面包含get和set方法。

uni-app学习(九)：computed相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
OpenCV与图像处理学习九——连通区域分析算法（含代码）
OpenCV与图像处理学习九--连通区域分析算法(含代码) 一.连通区域概要二.Two-Pass算法三.代码实现一.连通区域概要连通区域(Connected Component)一般是指图像中 ...
PyTorch框架学习九——网络模型的构建
PyTorch框架学习九--网络模型的构建一.概述二.nn.Module 三.模型容器Container 1.nn.Sequential 2.nn.ModuleList 3.nn.ModuleDi ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
APICloud开发app学习（一）
APICloud开发app学习(一) 首先APICloud提供了前端框架,以及封装的内部引擎,能够直接用通过引擎生成的对象api. 一.api对象 api 对象提供了构建应用程序所需要的一些基本的方法 ...
听书 app,学习用途
Ting 项目地址:zjw-swun/Ting 简介: 听书 app,学习用途更多:作者提 Bug 标签: 我是听书重度用户,因为某喜下架了很多我喜欢听的免费资源,,比如<我当算命先生那 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

uni-app学习(九)：computed

uni-app学习(九)：computed相关推荐

最新文章

热门文章