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 ...
随机推荐
- SAS Shortcut Keys
最常用的键有F3(运行代码).F6(查看log信息).Ctrl + / (注释代码).Ctrl + Shift + / (取消代码注释) SAS系统一共有4类快捷键,其中部分有重复, 第一类可自定义. ...
- 【CF995F】 Cowmpany Cowmpensation
CF995F Cowmpany Cowmpensation Solution 这道题目可以看出我的代码能力是有多渣(代码能力严重退化) 我们先考虑dp,很容易写出方程: 设\(f_{i,j}\)表示以 ...
- CF1146H Satanic Panic
题目传送门 Description 给定二维平面内\(n\)个点\((n\leq 300)\),求能组成五角星(不要求正五角星)的五元组个数. Solution 一道小清新的寄蒜几盒计算几何题,代码不 ...
- “全栈2019”Java多线程第三十四章：超时自动唤醒被等待的线程
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- Nmap命令的常用实例
一.Nmap简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推断计算机运行哪个操作系统(这是亦称 fingerprinting).它是网络管 ...
- Yii2框架 数据库常用操作
通用: use yii\db\Query; $query = new Query(); 查询: Query: $rows = (new \yii\db\Query()) ->select(['c ...
- 利用koa打造jsonp API
概述 最近学习利用koa搭建API接口,小有所得,现在记录下来,供以后开发时参考,相信对其他人也有用. 就目前我所知道的而言,API有2种,一种是jsonp这种API,前端通过ajax来进行跨域请求获 ...
- harbor镜像仓库-01-搭建部署
harbor镜像仓库-01-搭建部署 dockerregistryharbor安装部署docker-compose harbor的https配置参考另一章节harbor镜像仓库-02-https访问配 ...
- D3.js的基础部分之数组的处理 数组的排序和求值(v3版本)
操作数组 D3提供了将数组洗牌.合并等操作,使用起来是很方便的. d3.shuffle(array,[,lo[,ji]]) : //随机排列数组. d3.merge(arrays) : / ...
- Docker三剑客之Docker Compose
一.什么是Docker Compose Compose 项目是Docker官方的开源项目,负责实现Docker容器集群的快速编排,开源代码在https://github.com/docker/comp ...