<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 安装并启动 ...
随机推荐
- ARM汇编指令实验
题目 地址为0x40008000起始的内存中存放了20个无符号的8位整数,请编写ARM汇编程序实现如下功能: 采用冒泡法将以上内存中的数据按照从小到大的顺序排列. 注意:在验收实验时,需要自己把具体的 ...
- SQL动态化多个分组查询
现有以下三张表,分别为:diqu(地区表),zhiye(职业表),info(信息表) 最基本的分组查询 1 select dqID,jbID,COUNT(1) from info group by d ...
- 手把手教你搭建 Ceph＋JuiceFS
Ceph 提供了对象存储,可作为存储引擎在 JuiceFS 中使用.这一组合非常适合云计算.大数据分析和机器学习等数据密集型应用场景. 在日常部署中可直接通过 Ceph RADOS 配合 JuiceF ...
- 使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙
纯血鸿蒙即将到来 在今年 8 月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的 AOSP 代码,彻底与 Android 切割,使 ...
- out.print()
在学习过程中发现跟着视频打out.print报错 查阅资料知道 新建Java工程时,应选择Java Enterprise而非Java里的webapplication(Java Enterprise会自 ...
- windows查看GPU信息（nvidia-smi）
一般在使用windows系统的电脑时,想要了解GPU的使用情况时,我们通常会打开任务管理器去查看.但是这种方式一般只能看到简单的情况.那么我们想要了解更多的情况的话,该怎么办呢.可以在cmd中输入nv ...
- 针对el-menu-item组件的警告Invalid event arguments: event validation failed for event "cli
现象: 解决办法: 加上index这个唯一标识,不然会有意想不到的问题
- 用c++写 爱心图案
绘制爱心曲线 现代数学的一个有趣的证明是 Georg Cantor 证明了有理数是可枚举的.在这篇博客中,我们将通过编程绘制一个简单而美丽的数学图形:爱心曲线. 爱心曲线代码 //爱心曲线 (x^2 ...
- 分布式机器学习的故事：Docker改变世界
分布式机器学习的故事:Docker改变世界 Docker最近很火.Docker实现了"集装箱"--一种介于"软件包"和"虚拟机"之间的概念- ...
- Mybatis源码1JDBC->mybatis主要流程->mybatis Excutor简介
=== 一丶mybatis概述 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.My ...