<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 安装并启动 ...
随机推荐
- Postgres 和 MySQL 应该怎么选？
PostgreSQL和MySQL是两个流行的关系型数据库管理系统(DBMS).它们都具有一些相似的功能,但也有一些区别. 在选择使用哪个DBMS时,需要考虑多个因素,包括性能.可扩展性.安全性.功能丰 ...
- 瀑布图有什么作用？除了excel如何快速制作？
瀑布图是一种特殊的数据可视化图表,具有以下作用: 1. 对比变化:瀑布图可以清晰地展示数据在不同因素作用下的变化情况.通过将数据分解成各个组成部分,并以阶梯状呈现,可以直观地对比每个因素对总体结果的影 ...
- C++ 返回函数指针的函数
目录 0 前言 1 Function Pointer in C/C++ type 1.1 ordinary function Pointer 1.2 non-static member functio ...
- 拖.sql文件到cmd中运行
这个非常简单,但是网上说的又不清楚. 第一步cmd中进入数据库 其操作是 mysql -u root - p 密码: 第二步使用数据库 其操作是use 数据库名字: ...
- Python——第二章：字典（dictionary）以及 添、删、改、查
首先, 字典是以键值对的形式进行存储数据的,必须有键[key],有值[value] 字典的表示方式: {key:value, key2:value, key3:value} 举例: dic = {&q ...
- 编译安装python 3.11
先处理下opensll的版本,以免编python译环境异常:安装 openssl-1.1.1 yum remove openssl cd /opt wget https://www.openssl.o ...
- 如何用.net制作一个简易爬虫抓取华为应用市场数据
公司最近要做一款手机,手机需要制作一个应用市场.那么问题来了,自己制作应用市场,数据从哪来呢?作为一个创业型公司.搜集数据变成为了难题. 于是突然想到能不能通过程序去抓取别人应用市场的数据-- 那么我 ...
- PB从入坑到放弃（七）PBer们的福音来了
写在前面 也许现在的你需要用PB完成毕业设计.需要维护远古时代的代码,又或者是你呆的公司就是要求要用PB开发项目. 不管你是出于什么原因还在使用PB,不可否认PB在数据窗口非常优秀,熟练使用之后开发数 ...
- 为什么OpenAPI是未来企业数字化转型的决定性因素？
本文分享自华为云开发者联盟公众号<为什么OpenAPI是未来企业数字化转型的决定性因素?>. 随着数字经济不断发展升级,数据互通.万物互联正在逐步成为IT产业发展的主旋律,企业数字化转型也 ...
- 一图看懂CodeArts Inspector 三大特性，带你玩转漏洞管理服务
本文分享自华为云开发者联盟公众号<一图看懂华为云CodeArts Inspector三大特性,带你玩转漏洞管理服务>. 华为云漏洞管理服务CodeArts Inspector是面向 ...