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 ...
随机推荐
- Python绘制折线图
一.Python绘制折线图 1.1.Python绘制折线图对应代码如下图所示 import matplotlib.pyplot as pltimport numpy as np from pylab ...
- 模仿写了一个摸鱼APP解决原作者的问题
前几天见到微博里有人提到摸鱼APP,发现需要在windows store下载才可以使用,文件约100多M左右的样子,自已没有登录微软Store的习惯.想想只有一个介面,没有必要这么大,于是,自已动手写 ...
- CF699A Launch of Collider 题解
Content 有 \(n\) 辆车在一条数轴上,第 \(i\) 辆车在 \(a_i\) 上,每辆车要么向左,要么向右.开始,它们以 \(1\) 个单位每秒的速度在行驶.问你第一次撞车发生在第几秒的时 ...
- java 8 启动脚本优化
1 #!/bin/bash 2 3 JAVA_HOME=/usr/java/default 4 5 #java虚拟机启动参数 6 JAVA_OPTS="-server -Xms1366m - ...
- java 集合Collections 工具类:排序,查找替换。Set、List、Map 的of方法创建不可变集合
Collections 工具类 Java 提供1个操作 Set List Map 等集合的工具类 Collections ,该工具类里提供了大量方法对集合元素进行排序.查询和修改等操作,还提供了将集合 ...
- python开发环境软件包安装相关 failed with error code 1 in /tmp/pip-build-vn_f_e1n/psutil/
指定源安装 pip install git+https://github.com/xxxxxx.git pip install -r requirements.txt -i https://mirro ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- UDP&串口调试助手用法(1)
一览 UDP 串口 常用 功能概述 概览 支持UDP通信协议: 广播.单播.组播 支持串口通信 配置了常用的配置,常用的进制转化: 2进制,8进制,10进制,和16进制之间的转换 配置了 计算器,加减 ...
- 【LeetCode】1461. 检查一个字符串是否包含所有长度为 K 的二进制子串 Check If a String Contains All Binary Codes of Size K
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 统计长度为 K 的子串个数 日期 题目地址:https ...
- 【LeetCode】304. Range Sum Query 2D - Immutable 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 预先求和 相似题目 参考资料 日期 题目地址:htt ...