Vue_(组件)计算属性
Vue计算属性中文文档 传送门
Vue计算属性：更强大的属性声明方式，可以对定义的属性进行逻辑处理与数据监视;
注意：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
Learn
一、计算属性的基本使用
二、计算属性的getter和setter
三、计算属性与方法的区别【重点】 传送门
项目结构
【每个demo下方都存有html源码】
一、计算属性的基本使用
计算属性computed中对<input>组件中msg信息进行事件监听
data:{
msg:'Hello Gary!!'
},
computed : {
msg1 : function(){
return this.msg.toUpperCase();
}
}
<div>
<input type="text" v-model="msg" /><br />
原样文本显示：<h1>{{msg}}</h1><br /> 大写文本显示：<h1>{{msg.toUpperCase()}}</h1><br />
计算属性文本显示：<h1>{{msg1}}</h1><br />
</div>
两种方法使原文本显示数据小写全部转换为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
msg:'Hello Gary!!'
},
computed : {
msg1 : function(){
return this.msg.toUpperCase();
}
}
});
} </script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
原样文本显示：<h1>{{msg}}</h1><br /> 大写文本显示：<h1>{{msg.toUpperCase()}}</h1><br />
计算属性文本显示：<h1>{{msg1}}</h1><br />
</div> </body>
</html>
Gary_computed.html
二、计算属性的getter和setter
需求：需要计算属性文本要比原样文本数字大10
计算属性computed中对<input>组件中对num1数字信息进行事件监听
data:{
num:0
},
computed : {
num1: function(){
return parseInt(this.num) + 10;
}
}
<div>
<input type="text" v-model="num" /><br />
原样文本显示：<h1>{{num}}</h1><br />
<input type="text" v-model="num1" /><br />
计算属性文本显示：<h1>{{num1}}</h1><br />
</div>
发现只能正向从原样显示去修改计算属性中num1的数值，如果要从计算属性去修改原样文本显示，需要设置计算属性的get和set方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
num:0
},
computed : {
num1: function(){
return parseInt(this.num) + 10;
}
}
});
} </script> </head>
<body>
<div>
<input type="text" v-model="num" /><br />
原样文本显示：<h1>{{num}}</h1><br />
<input type="text" v-model="num1" /><br />
计算属性文本显示：<h1>{{num1}}</h1><br />
</div>
</body>
</html>
Gary_computed-02.html
给计算属性显示设置get和set方法
data:{
num:0
},
computed : {
num1 : {
get : function(){
return parseInt(this.num) + 10;
},
set : function(value){
this.num = value;
}
}
}
注意：set方法中是this.num=value,num1的值去监听num值的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
num:0
},
computed : {
num1 : {
get : function(){
return parseInt(this.num) + 10;
},
set : function(value){
this.num = value;
}
}
}
});
} </script> </head>
<body>
<div>
<input type="text" v-model="num" /><br />
原样文本显示：<h1>{{num}}</h1><br />
<input type="text" v-model="num1" /><br />
计算属性文本显示：<h1>{{num1}}</h1><br />
</div>
</body>
</html>
Gary_computed-02.html
三、计算属性与方法的区别
计算属性有缓存机制，方法没有
只要计算属性内相关依赖的值不发生改变，多次调用计算属性可以从缓存中获取值，不必重复计算
方法每次调用都要重新执行一遍
小写转化成大写计算属性写法
data : {
msg : 'Gary'
},
computed : {
msg1 : function(){
console.log("执行计算属性computed");
return this.msg.toUpperCase();
}
小写转化成大写方法写法
data : {
msg : 'Gary'
},
methods : {
upperCase(){
console.log("执行方法methods");
return this.msg.toUpperCase();
},
添加个<button>组件去展示输入文本中转化成大写后的内容，用来查看计算属性与方法区别
<div>
<input type="text" v-model="msg" /><br />
原样显示：<h1>{{msg}}</h1><br /> 计算属性显示：<h1>{{msg1}}</h1><br />
方法显示：<h1>{{upperCase()}}</h1><br />
<button @click="show">show</button>
</div>
show(){
console.log("计算属性展示文本中的内容 ：" + this.msg1);
console.log("方法调用展示文本中的内容 ：" + this.upperCase());
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
new Vue({
el : 'div',
data : {
msg : 'Gary'
},
computed : {
msg1 : function(){
console.log("执行计算属性computed");
return this.msg.toUpperCase();
}
},
methods : {
upperCase(){
console.log("执行方法methods");
return this.msg.toUpperCase();
},
show(){
console.log("计算属性展示文本中的内容 ：" + this.msg1);
console.log("方法调用展示文本中的内容 ：" + this.upperCase());
}
}
});
}
</script>
</head>
<body>
<div>
<input type="text" v-model="msg" /><br />
原样显示：<h1>{{msg}}</h1><br /> 计算属性显示：<h1>{{msg1}}</h1><br />
方法显示：<h1>{{upperCase()}}</h1><br />
<button @click="show">show</button>
</div>
</body>
</html>
Gary_computed-03.html
Vue_(组件)计算属性的更多相关文章
- Vue_(组件)实例属性
Vue实例属性与方法中文文档 传送门 Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性 二.vm.$el:获取实例挂载的元素 三.vm.$options:获取自 ...
- 前端笔记之Vue（二）组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）
表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 03 . Vue基础之计算属性,组件基础定义和使用
vue组件 fetch请求组件 fetch XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好,兼容性不好. <!DOCTYPE h ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
随机推荐
- 数据库数据导入/导出报错：无法在只读列“Id”中插入数据。
本文仅供小白参考,大佬请随意...... 本例是:从vs 2017自带的localDB数据库的数据---导出到---->Sql Server 2008中的相应数据库中 1. 导出数据库: 2. ...
- 题解luoguP2054 BZOJ1965【[AHOI2005]洗牌】
题目链接: https://www.luogu.org/problemnew/show/P2054 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...
- Laravel where条件拼接，数组拼接where条件
问题描述:laravel where 条件拼接 Like出错,搜索不到要搜索的内容. 问题代码: // 作物 $crop_class_id = $request->crop_class_id; ...
- java实现spark常用算子之Union
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- ES6入门五：箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- H5移动端弹幕动画实现
思路 把单个内容编辑好,计算自身宽度,确定初始位置 移动的距离是屏幕宽度 js动态的添加css动画函数,将高度.动画移动时间.动画延迟时间都用随机数控制 代码: html骨架结构 (以三个为例,如果觉 ...
- Vagrant box 增加磁盘容量方法
一直以来都是以vagrant+docker作为开发环境,可是久而久之,原Box自带的8G容量就捉襟见肘了.时不时需要手动删除一些东西. Virtualbox 本身只支持vdi硬盘文件格式的扩容,对vm ...
- Nginx----请求分发中心
Nginx请求分发中心,需要明确几个基本问题,什么是请求,分发中心是什么,为什么需要分发中心. 什么是请求? Niginx是一款高性能的HTTP服务器,这里的请求当然是指接收客户端发送的http协议请 ...
- linux命令详解——xargs
1. 简介 之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命令,例如: find /sbin -perm +700 |ls -l ...
- S19格式
S-record格式文件是Freescale CodeWarrior编译器生成的后缀名为.S19的程序文件,是一段直接烧写进MCU的ASCII码,英文全称问Motorola format for EE ...