<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 安装并启动 ...
随机推荐
- 耗时三年开源的H5商城，生产级代码实战
waynboot-mall 商城项目是我从疫情开始初期着手准备开发的,到如今 2023 年底,已经过了 3 年多的时间. 从项目初期到现在,一个人持续迭代,修复漏洞,添加功能,经历了前端开发工具从 v ...
- [ABC261A] Intersection
Problem Statement We have a number line. Takahashi painted some parts of this line, as follows: Firs ...
- FOJ有奖月赛-2015年11月 Problem A
Problem A 据说题目很水 Accept: 113 Submit: 445Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...
- flask蓝图（这玩意就是django的子应用）
蓝图的概念类似django的子应用,作用就是分模块开发,有关联的都放在一起. 蓝图的创建步骤: 新建一个包(一个包就是一个模块.等同于一个子应用) 在包的__init__.py中创建蓝图对象 . 蓝图 ...
- selenium之下拉菜单列表定位
下拉菜单列表定位>>使用Select类定位 from selenium.webdriver.support.ui import Select #导入Select类 select=Selec ...
- MySQL 基础（四）锁
解决并发事务带来的问题 写-写情况 任意一种事务隔离级别都不允许 "脏写" 的发生,因为这样会使得数据混乱.所以,当多个未提交的事务相继对一条记录进行改动时,就需要使得这些事务串行 ...
- 光大银行刘淼：基于华为云GaussDB(DWS) 数据仓库创新实践
摘要:面向未来数据平台3.0要做架构减法,平台由N->1,华为云GaussDB(DWS)未来作为数据仓库唯一平台,数据链路实现从数据湖直接到华为云GaussDB(DWS)数据仓库. 日前,华为举 ...
- 厚积薄发！华为云7篇论文被AAAI收录，2021年AI行业技术风向标看这里！
摘要:近期,全球人工智能领域的顶级学术会议AAAI 2021将于2月2日-9日在线上召开,华为云的7篇AI科研成果被收录. 全球人工智能领域的顶级学术会议AAAI 2021将于2月2日-9日在线上召开 ...
- openGemini内核源码正式对外开源
摘要:openGemini是一个开源的分布式时序数据库系统,可广泛应用于物联网.车联网.运维监控.工业互联网等业务场景,具备卓越的读写性能和高效的数据分析能力. 本文分享自华为云社区<华为云面向 ...
- DevCloud加持下的青软，让教育“智”上云端
摘要:构建多体系人才云实践环境,提供企业所需人才培养平台,构建以学习为中心的全新教育生态. 本文分享自华为云社区<[云享·伙伴]第5期:华为云DevCloud加持下的青软,让教育"智& ...