vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值。
参考地址:https://www.jianshu.com/p/ff708a773dc0
// 父组件
<template>
<div>
<navbar :ctype="ctype"></navbar>
</div>
</template> <script>
import navbar from '@/components/navbar'
export default {
components: {navbar},
data () {
return{
ctype:1
}
}
}
</script> // 子组件
<template>
<div>
<div>{{thistype}}</div>
</div>
</template> <script>
export default {
props:['ctype'],
computed: {
normalizedSize: function () {
return this.ctype.trim().toLowerCase()
}
},
data(){
return{
thistype:this.ctype
}
}
}
</script>
vue中computed的作用以及用法的更多相关文章
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
- vue中computed和watch的用法
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...
- Linq中关键字的作用及用法
Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
- Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
- (转载)MySQL数据类型中DECIMAL的作用和用法
(转载)http://database.51cto.com/art/201005/201651.htm 在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都 ...
- Vue中computed,methods 和watch
Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...
随机推荐
- 走进Spring Boot源码学习之路和浅谈入门
Spring Boot浅聊入门 **本人博客网站 **IT小神 www.itxiaoshen.com Spring Boot官网地址:https://spring.io/projects/spring ...
- Mongodb集群调研
目录 一.高可用集群的解决方案 二.MongoDB的高可用集群配置 三.Mongo集群实现高可用方式详解 四.Sharding分片技术 一.高可用集群的解决方案 高可用性即HA(High Availa ...
- Typora软件使用教程
Typora软件的使用教程 Typora软件简介 Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别.当然重点是免费. Typora编 ...
- 突出显示(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 当一个大的项目文件做好以后,查看全部内容,肉眼多少会有点吃不消,这时就需要"划重点".在Porect里 ...
- CF1506C Double-ended Strings 题解
Content 有两个字符串 \(a,b\).我们每次操作可以将两个字符串中的一个字符串的最前面一个字符或这最后面一个字符删去(可以将某个字符串通过若干次操作变为空串).求需要多少次操作才能够使 \( ...
- vscode配置指南,美化技巧
vscode配置指南,美化技巧 vscode****选中部分高亮 "workbench.colorCustomizations": { "editor.selection ...
- Centos(Linux)安装openoffice教程
一.从官网下载openoffice软件 下载地址:http://www.openoffice.org/zh-cn/download/ 选择(RPM)类型进行下载,选择对应的版本,这里默认选择是最新的版 ...
- JAVAWEB使用保存cookie、删除cookie、获取cookie工具类
package com.test; import org.apache.commons.lang.StringUtils; import org.springframework.util.Assert ...
- win10使用cmake配置fmt生成vs2015解决方案(fmt version 7.0.1)
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 本文仅为参考,请以实际情况为准, fmt版本: 7.0.1 准备 下载源码fmt : htt ...
- 【LeetCode】497. Random Point in Non-overlapping Rectangles 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/random-p ...