Vue计算属性的用法
计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了
这里写个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="js/vue.min.js"></script>-->
<script src="vue.min.js"></script> </head>
<body>
<div id="app">
总价：{{prices}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'Banana',
price:2,
count:10
}
]},
computed:{
prices:function () {
var prices=0;
for(var i=0;i<this.package1.length;i++){
prices+=this.package1[i].price*this.package1[i].count;
}
for (var i=0;i<this.package2.length;i++){
prices+=this.package2[i].price*this.package2[i].count;
}
return prices;
}
} })
</script>
</body>
</html>
在computed属性里面定义一个计算price的方法，然后对data里面的东西进行操作
下面看一下运行结果：
然后再看一下如何使用getter、setter方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{fullname}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed:{
fullname:{
//getter，用于读取
get:function () {
return this.firstName+ ' '+this.lastName;
},
//setter
set:function (newValue) {
var names=newValue.split(' ');
this.firstName=names[0];
this.lastName=names[names.length-1];
}
}
}
})
</script>
</body>
</html>
展现出来的效果是这样的
也是比较简单的用法，在购物模型里面还有金融计算类的应用里面应该用的比较多这个属性
Vue计算属性的用法的更多相关文章
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- vue - 计算属性、表单输入绑定
计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...
- vue计算属性详解
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- 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 ...
随机推荐
- @transactional作用和事务
今天在博客园看到有发布spring的注解,留意到@transactional这个注解.立马就百度.学习了 使用这个注解的类或者方法表示该类里面的所有方法或者这个方法的事务由spring处理,来保证事务 ...
- Swift 里字符串（十一）OC 字符串和 Swift 字符串的转换
 to OC func _bridgeToObjectiveCImpl() -> AnyObject { if _guts.isSmall { return _guts.asSmall.wit ...
- JavaScript getter和setter
对象的属性是由属性名name,值key,和其他特性(可读写性 writable,可枚举性enumerable,可配置性configurable)组成的.从ES5开发,提供了getter和setter ...
- JavaScript 那些不经意间发生的数据类型自动转换
JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式.但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的. ...
- centos7 升级GCC版本到7.3.0
废话不多说,直接上shell,还是比较简单的.就是编译时间有点长... 都是以小时计的......,我刀片机上面一台虚拟机反正是等了3个小时 #必备组件安装 yum install -y gcc gc ...
- CI框架入门笔记
当前(2019-03-22)CodeIgniter 框架的最新版本是 3.1.5,于2017年6月发布,距今快两年了也没有更新,这与 Laravel 的更新速度相比差距太大了.因为确实,它是一个很古老 ...
- typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库
接上一篇,这里使用 sequelize 来连接 postgresql 数据库 1.安装 sequelize,数据库驱动 pg yarn add sequelize sequelize-typescri ...
- SQLServer中的cross apply和FOR XML PATH
参考: FOR XML PATH:http://www.cnblogs.com/doubleliang/archive/2011/07/06/2098775.html cross apply:http ...
- 从学CodeSmith谈程序员学习方法
一直觉得CodeSmith是个好东西,最近正好有点时间来研究下,其实以前也想学习怎么用,在博客园搜一下有很多介绍CodeSmith的文章,我就收藏过一个写得很详细的http://terrylee.cn ...
- 03-03:springBoot 整合thymeleaf
thymeleaf 语法详解1.变量输出: th:text :在页面中输出某个值 th:value :将一个值放到input标签中的value中.2.判断字符串是否为空 ①:调用内置对象一定要用# ② ...