<vue 基础知识 4、计算属性computed>
代码结构
一、 计算属性简单使用
1、效果
2、代码
01-计算属性简单用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-什么是计算属性</title>
</head>
<body> <div id="app">
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{fullName}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: '张',
lastName : '三'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script> </body>
</html>
一、 计算属性复杂使用
1、 效果
计算多本书的总价
2、代码
02-绑定class属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-计算属性复杂操作</title>
</head>
<body> <div id="app">
<h2>总价值: {{totalPrice}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: [
{name: '三国演义', price: 100, count: 1},
{name: '西游记', price: 90, count: 2},
{name: '红楼梦', price: 80, count: 3},
]
},
computed: {
totalPrice() {
let total = 0
for (let i in this.books) {
let book = this.books[i]
total += book.price * book.count
}
return total
}
}
})
</script> </body>
</html>
三、computed和methods的区别
1、效果
computed 与methods 的方法区别
（1） 调用的时候computed不用加括号
（2） computed会对计算结果进行缓存而methods不会
2、 代码
03-绑定class属性(综合练习).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-computed和methods的区别</title>
</head>
<body> <div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2> <h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2> </div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName() {
console.log('调用了computed中的fullName');
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
console.log('调用了methods中的getFullName');
return this.firstName + ' ' + this.lastName
}
}
})
</script> </body>
</html>
<vue 基础知识 4、计算属性computed>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- 理解Mysql索引原理及特性
作为开发人员,碰到了执行时间较长的sql时,基本上大家都会说"加个索引吧".但是索引是什么东西,索引有哪些特性,下面和大家简单讨论一下. 1 索引如何工作,是如何加快查询速度 索引 ...
- 图纸安全管理：华企盾DSC数据防泄密系统的综合解决方案
企业设计人员创造出的图纸既是珍贵的知识产权,又承载着公司的创新力和竞争力.然而,随着信息技术的迅速发展,图纸泄密风险也在不断增加.为了保护这一重要的企业资产,华企盾DSC数据防泄密系统提供了一系列专业 ...
- 面试官：说说MVCC的执行原理？
MVCC(Multi-Version Concurrency Control)是一种并发控制机制,用于解决数据库并发访问中,数据一致性问题.它通过在读写操作期间保存多个数据版本,以提供并发事务间的隔离 ...
- 支付宝 v3 验签如何实现
上次给大家介绍了 支付宝 v3 自签名如何实现,这次顺便再把验签也写一下. 为什么要验签 说起为什么要验签,如果要详细一点解释的话,可以写很多很多...... 我们就简单一点来解释:验签可以证明接收到 ...
- 从零玩转七牛云之CDN-qiniuyunzhicdn
title: 从零玩转七牛云之CDN date: 2022-03-27 19:14:43.036 updated: 2022-04-10 14:13:27.322 url: https://www.y ...
- 【笔记-错误】springCloud-alibaba-feign集成sentinel的启动报错
背景 随着Spring Cloud Alibaba 2.2.0.RELEASE的发布,终于可以使用最新的Spring Boot和Spring Cloud. 现在的环境 依赖 版本 Spring Boo ...
- Next.js 开发指南 路由篇 | App Router
前言 路由(routers)是应用的重要组成部分.所谓路由,有多种定义,对于应用层的单页应用程序而言,路由是一个决定 URL 如何呈现的库,在服务层实现 API 时,路由是解析请求并将请求定向到处理程 ...
- 12、FlutterMediaQuery获取屏幕宽度和高度
final size =MediaQuery.of(context).size; class HomePage3 extends StatelessWidget { const HomePage3({ ...
- 温故而知新——MYSQL基本操作
相关连接: mysql和sqlserver的区别:https://www.cnblogs.com/vic-tory/p/12760197.html sqlserver基本操作:https://www. ...
- 中秋佳节，程序员教你AI三步成诗，秒变“李白”
摘要:举杯邀明月,用技术来附庸风雅. 中秋佳节来临之际,你是否开始思念远方的亲朋好友,想为他们送上祝福?又或是与家人团圆赏月之时,希望借一段风雅诗词抒情达意? 华为云的开发者们教你一招,来个技术风的A ...