<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 安装并启动 ...
随机推荐
- SpringBoot接口开发
依赖的jar包<dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 本地数据备份与FTP远程数据迁移
数据是电脑中最重要的东西.为了保证数据安全,我们经常会对数据进行备份.之前一直采用将重要数据拷贝至移动硬盘的方式实现备份,实现简单但每次都需要把所有文件拷贝一次,当文件很大时效率较低. 因此,考虑使用 ...
- flask统一异常捕获（作用：统一捕获指定的异常并返回）
flask中可以使用装饰器errorhandler来对指定的异常.状态码等统一捕获并处理. 对指定的状态码进行统一捕获 @app.errorhandler(404) # 参数e是异常的详细信息的对象, ...
- 推荐一款功能齐全的开源MES/万界星空科技mes
推荐一款功能齐全的开源MES 万界星空科技商业开源MES可以提供包括制造数据管理.计划排程管理.生产调度管理.库存管理.质量管理.人力资源管理.工作中心/设备管理.工具工装管理.采购管理.成本管理.项 ...
- 新报: 根据IP获取物理地址不需要调用接口啦
一. 复制data文件夹到自己的项目当中 可以进行加载到这个文件即可 博主放入在项目的根目录当中 请移步Gitee pull 该文件 https://gitee.com/yangbuyi/ip_fil ...
- RSA 加密算法
RSA加密算法是一种非对称加密算法,在公开密钥加密和电子商业中被广泛使用.RSA是由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Ad ...
- bazel test 编译失败：googletest、gtest 报错
问题描述 bazel test 遇到很多奇怪的编译错误,报错位置位于"googletest"目录,而且没有修改过 googletest 源码: ERROR: /bazel_cach ...
- 在Docker上面安装/启动、运行、挂载MySQL5.7
下载文档请看:https://hub.docker.com/r/mysql/mysql-server 一.下载镜像 执行命令: docker pull mysql/mysql-server:5.7 查 ...
- 如何上传你的组件到npm
前言 以react为例子 webpack作为打包工具 准备工作 安装node npm上注册账号 https://www.npmjs.com/ 创建要上传组件 新建项目 生成package.json文件 ...
- 详解ZooKeeper在微服务注册中心的应用
本文分享自华为云社区<SpringCloud ZooKeeper 详解,以及与Go.Rust等非Java服务的集成>,作者: 张俭. ZooKeeper,是一个开源的分布式协调服务,不仅支 ...