Vue 框架-04-计算属性

计算属性是什么？

大家可以去看官网解释：计算属性和侦听器

今天的第一个小实例：

为啥先放折磨一个实例，之前数据绑定的就已经可以实现了，看起来那么简单，就是为了告诉大家，当点击第一个按钮【Add to A】的时候，

Age + A = 这个方法执行了，大家可以看得到

实际呢，下面的两个方法都会刷新，虽然 Age + B = 没有效果，是因为没有修改数据，后面会详细说明

源代码 html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的-->

			<h2>Computed 计算属性</h2>

			<button @click="a++">Add to A</button>

			<button @click="b++">Add to B</button>

			<p>A - {{a}}</p>

			<p>B - {{b}}</p>

			<p>Age + A = {{addToA()}}</p>

			<p>Age + B = {{addToB()}}</p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/computed.js" ></script>

	</body>

</html>

源代码 js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		a : 0,

		b : 0,

		age : 20,

	},

	methods:{

		addToA: function(){

			return this.a + this.age;

		},

		addToB: function(){

			return this.b + this.age;

		}

	}

});

其实大家可以看到，点击按钮，addToA() 方法并没有直接的去触发，而是我们点击了第一个按钮，整个 methods 中的方法都会执行一遍，现在证明一下，上面的两个方法都会执行

修改上面 html 文件为：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的-->

			<h2>Computed 计算属性</h2>

			<button @click="a++;b++">Add to A</button>

			<button @click="b++">Add to B</button>

			<p>A - {{a}}</p>

			<p>B - {{b}}</p>

			<p>Age + A = {{addToA()}}</p>

			<p>Age + B = {{addToB()}}</p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/computed.js" ></script>

	</body>

</html>

可以看到只是把，第一个按钮对执行了一条语句，这时候：

大家可以看到，就是当我们执行修改时，所有 methods 中的方法都会执行，整个 dom 都会重新加载一遍。这也很耗费浏览器性能的，然而下面要介绍的 Computed 就不是，点击的时候，只会执行相关的 计算属性

但是，需要注意的一点就是，methods 和 computed 在加载 js 文件的时候，都会默认全执行一遍

而 computed 在后续点击触发的时候，只会触发相应的计算属性

为了说明上面这一点，把 a 赋值成 1，可以看到默然全部执行的效果

下面是 computed 的小实例：



【注意】：使用 computed 不加 () ，直接使用方法名，方法定义和 methods 一样，请看源代码

源代码 html 文件:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的-->

			<h2>Computed 计算属性</h2>

			<button @click="a++">Add to A</button>

			<button @click="b++">Add to B</button>

			<p>A - {{a}}</p>

			<p>B - {{b}}</p>

			<p>Age + A = {{addToA}}</p>

			<p>Age + B = {{addToB}}</p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/computed.js" ></script>

	</body>

</html>

源代码 js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		a : 0,

		b : 0,

		age : 20,

	},

	methods:{

//		addToA: function(){

//			return this.a + this.age;

//		},

//		addToB: function(){

//			return this.b + this.age;

//		}

	},

	computed:{

		addToA: function(){

			console.log("addToA 执行一次");

			return this.a + this.age;

		},

		addToB: function(){

			console.log("addToB 执行一次");

			return this.b + this.age;

		}

	},

});

上面就是关于计算属性的描述了

Vue 框架-04-计算属性的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  4. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  5. vue学习笔记 计算属性（四）

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  6. 关于vue的使用计算属性VS使用计算方法的问题

    在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里: <div id="example"> <p& ...

  7. vue.js实战——计算属性

    1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...

  8. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...

  9. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

随机推荐

  1. Linux下超级命令htop的学习使用

    top作为日常管理工作中最常用也是最重要的Linux系统监控工具之一,可以动态观察系统进程状况.但其缺点就是只支持键盘操作,显示也单调.作为刚才Windows转到Linux的我来说,现在有了一个更好的 ...

  2. Spring Security构建Rest服务-0300-Restful API异常处理

    SpringBoot默认的错误处理机制: 一.测试需要的部分代码 (完整代码放在了github https://github.com/lhy1234/spring-security): UserCon ...

  3. web测试总结—用户体验

    一.什么是用户体验 用户体验,英文叫做user experience,缩写为UE,或者UX.一个较常见的定义是“指用户访问一个网站或者使用一个产品时的全部体验.他们的印象和感觉,是否成功,是否享受,是 ...

  4. [转] TCP/IP原理、基础以及在Linux上的实现

    导言:本篇作为理论基础,将向我们讲述TCP/IP的基本原理以及重要的协议细节,并在此基础上介绍了TCP/IP在LINUX上的实现. OSI参考模型及TCP/IP参考模型 OSI模型(open syst ...

  5. 关于Class中的Signature属性

    1.Signature属性:https://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html#jvms-4.7.9 2.ClassSigna ...

  6. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...

  7. [C语言]类型限定词const解析

    作为C90增加的一个受限类型关键字,const赋予了它修饰的变量一个新属性——不变性,如果一个变量声明中带有关键字const,则无法通过赋值.增减运算来修改该变量的值. 一.指针与const结合 co ...

  8. STL 容器简介

    一.概述 STL 对定义的通用容器分三类:顺序性容器.关联式容器和容器适配器. 顺序性容器是一种各元素之间有顺序关系的线性表.元素在顺序容器中保存元素置入容器时的逻辑顺序,除非用删除或插入的操作改变这 ...

  9. 软件级负载均衡器(LVS/HAProxy/Nginx)的特点简介和对比

    本文出自 “抚琴煮酒” 博客,出处http://andrewyu.blog.51cto.com/1604432/697466   现在网站发展的趋势对网络负载均衡的使用是随着网站规模的提升根据不同的阶 ...

  10. form表单select的选项值选择

    html: <form action=""> <p>选择城市</p> <p> <select name="" ...