3.vue计算属性
1、计算属性
再vue中如果出现表达式过长或者逻辑比较复杂,这时会导致代码不清晰,臃肿,难以维护所以我们会使用计算属性进行书写
再计算属性中可以放负责的逻辑,可以是函数,表达式等,但最终会返回一个结果,再使用计算属性的时候只要数据变化,计算属性就会重新执行,
视图也就跟着重新发生变化
每一个计算属性都是用的是函数进行表示的,最终返回的是一个值
2、实现计算属性的方法
所有的计算属性都是以函数的形式写在vue实例中的computed内,最终返回的是计算之后的结果
对于计算属性来说,因为它本身返回的就是一个结果,一个值,所以很多情况下,直接作为内容输出到DOM即可,会自动的进行执行
因为计算属性最终返回的是一个值,所以很多情况下我们都是需要加上return的
3、computed是计算属性:在使用的时候返回的是一个值,都是作为函数来写的,在调用的时候直接写名字即可
methods是方法:在使用的时候本身就是一个函数,所以返回的也是函数,在调用的时候按照正常函数调用的方式进行调用才行
4、为什么在用methods的时候会自动更新:
因为在使用methods的时候,数据发生变化,组件就会重新更新,重新渲染,特点就是只要重新渲染了,那么methods中的函数就会被全部重新执行
5、使用computed不会自动刷新:
因为在使用computed的时候它是会产生缓存的,只有当数据改变的时候,才会重新计算,但是其他的计算属性是不会被执行的
所以在使用的时候计算属性要比methods方法更加的节省性能
如果是负责逻辑的话使用计算属性,执行的时候会直接从缓存中执行
<template>
<div id="app">
<p>{{reveiveMsg}}</p>
<p>{{clickA()}}</p>
<button @click="a++">按钮methods_a++</button>
<button @click="b++">按钮methods_b++</button>
<p>a:{{a}}</p>
<p>b:{{b}}</p>
<p> sum+a={{addA}}</p>
<p> sum+a={{addB}}</p>
</div>
</template> <script>
export default {
name: 'App',
data () {
return {
msg: '好好学习天天向上a' ,
isture: false,
isElseTrue:true,
a: 0,
b: 0,
sum: 20
}
},
methods: { //Imethod中写的是对事件处理的处理函数
clickA: function () {
return this.msg
},
addA: function () {
console.log("执行AA")
return this.a + this.sum
},
addB: function () {
console.log("执行BB")
return this.b + this.sum
}
},
computed: {
reveiveMsg: function () {
return this.msg
},
addA: function () {
console.log("执行AA")
return this.a + this.sum
},
addB: function () {
console.log("执行BB")
return this.b + this.sum
}
}
} </script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.test{
color:skyblue;
}
</style>
3.vue计算属性的更多相关文章
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性,v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 第三节:Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
随机推荐
- 蓝桥杯 试题 算法提高 宰羊 DP解决
问题描述 炫炫回了内蒙,肯定要吃羊肉啦,所有他家要宰羊吃. 炫炫家有N只羊,羊圈排成一排,标号1~N.炫炫每天吃掉一只羊(这食量!其实是放生啦),吃掉的羊的邻居会以为它被放生了,然后又会告诉他们的邻居 ...
- JavaScript Basic
Exercise-1 Write a JavaScript program to display the current day and time in the following format. T ...
- 【chrome 】退出paused in debugger模式 (原创)
下面失效 https://blog.csdn.net/gs6511/article/details/62418422
- 【python爬虫】scrapy入门1--环境搭建
Scrapy Day01 (1) 进入主目录,右键打开终端,创建项目 scrapy startproject xicidailiSpyder 进入项目目录 cd xicidailiSpyder/ 创建 ...
- Python - 常用的PyCharm的快捷键和使用场景介绍
关于PyCharm的快捷键,由于数量众多,差不多有100个,相信几乎没有人会记住所有,每个人都会有自己顺手的几个,这里我将自己用着顺手,不别扭的快捷键分享出来,同时分享在哪里可以找到所有的快捷键. 一 ...
- os.walk()的实际应用
背景: 通过Mobaxterm从本地上传虹膜数据,一共79个类,每类里包含左右眼各400张数据,总共63200张,上传期间断网不确定是否传完. 思路: 1.首先遍历总类别数是否正确,若不足79,返回“ ...
- 远程快速安装mysql
远程服务器安装mysql数据库 https://www.cnblogs.com/renjidong/p/7047396.html 1.新开的云服务器,需要检测系统是否自带安装mysql # yum l ...
- 缓冲区(Buffer)的数据存取
缓冲区(Buffer) 1. 缓冲区(Buffer):一个用于特定基本数据类 型的容器. 由 java.nio 包定义的,所有缓冲区 都是 Buffer 抽象类的子类.2. Java NIO 中的 B ...
- MANIFEST.MF是个什么?
MANIFEST.MF是个什么? 写这篇文件主要记录JRA文件里面到底是什么?然后MANIFEST.MF又是什么?Springboot 如何只有Main方法就可以运行的? Springboot项目打包 ...
- Rocket - tilelink - Delayer
https://mp.weixin.qq.com/s/pc8f_DOJ7w8k8BeM9gPzVw 简单介绍Delayer的实现. 1. 基本介绍 以一定的概率延迟消息的传递. 类参数 ...