代码结构

一、     计算属性简单使用

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>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 基于DotNetty实现自动发布 - 自动检测代码变化

    前言 很抱歉没有实现上一篇的目标:一键发布,因为工作量超出了预期,本次只实现了 Git 代码变化检测 已完成的功能 解决方案的项目发现与配置 首次发布需要手动处理 自动检测代码变化并解析出待发布的文件 ...

  2. TIOBE 12月榜单: C# 即将成为2023 年度编程语言

    TIOBE 公布了 2023 年 12 月的编程语言排行榜. 2022年C# 在挑战成为年度编程语言,但在最后一刻,C++出人意料地夺得了冠军.今年,我们确信 C# 将获胜成为2023年度编程语言.它 ...

  3. 华企盾DSC可能造成系统蓝屏奔溃常见处理方法

    1.蓝屏先卸载我们DSC客户端检测是否是我们影响的 2.如果是我们影响的查到版本说明是否有处理过 3.是否有一些不常用的杀毒软件卸载试试 4.如果使用一些USB驱动类的先把USB的注册表改一下试试 5 ...

  4. ElasticSearch之Health API

    查看当前集群全部健康指标的信息,执行如下命令: curl -X GET "https://localhost:9200/_health_report?pretty" --cacer ...

  5. 聊聊ChatGLM6B的微调脚本及与Huggingface的关联

    本文首先分析微调脚本trainer.sh的内容,再剖析ChatGLM是如何与Huggingface平台对接,实现transformers库的API直接调用ChatGLM模型,最后定位到了ChatGLM ...

  6. 善用 vscode 的批量和模板技巧来提效

    vs code 其实有很多实用的技巧可以在日常工作中带来很大的提效,但可能是开发中没有相应的痛点场景,因此有些技巧接触的人不多 本篇就来介绍下多光标的批量操作和模板代码两种技巧在日常工作中的提效 涉及 ...

  7. JavaFx之TableView表格添加按钮删除行（二十二）

    JavaFx之TableView表格添加按钮删除行(二十二) JavaFx之TableView添加按钮 JavaFx之TableView删除行 编写一个xml <?xml version=&qu ...

  8. 【华为云技术分享】云容器引擎 CCE权限管理实践

    随着容器化的快速发展,大数据原有的分布式任务调度模式,正在被基于Kubernetes的技术架构所取代.CCE云容器引擎是华为云推出的支持Kubernetes社区原生应用和工具,应用级自动弹性伸缩,自动 ...

  9. 教你如何基于MindSpore进行ChatGLM微调

    本文分享自华为云社区<基于MindSpore的ChatGLM微调>,作者: JeffDing . 基于MindSpore的ChatGLM微调 克隆Hugging Face模型 克隆chat ...

  10. 云小课｜云数据库RDS实例连接失败了？送你7大妙招轻松应对

    摘要:自从购买了RDS实例,连接失败的问题就伴随着我,真是太难了.不要害怕,不要着急,跟着小云妹,读了本篇云小课,让你风里雨里,实例连接自此畅通无阻! 顺着以下几个方面进行排查,问题就可以迎刃而解~ ...