Vue2.0计算属性
Vue2.0计算属性：
计算属性：通过计算得到一个属性，避免v-if和v-for出现在同一个标签上
与函数相比
计算属性： 使用mounted操作了data中的数据，只要操作的data数据不变，
计算属性使用多次，也不会重新进行计算，依然使用第一次计算的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- 不是拿到数据才渲染，数组存在就会渲染 -->
<li v-if="news[0]">{{news[0].title}}</li>
</div>
<ul>
<li v-for="item,index in news" v-if="index>0">{{item.title}}</li>
</ul>
<div>
<li>{{firstNews.title}}</li>
</div>
<ul>
<li v-for="item in partNews">{{item.title}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
news:[]
},
mounted() {
this.news=[
{id:'1',title:'标题1'},
{id:'2',title:'标题2'},
{id:'3',title:'标题3'},
{id:'4',title:'标题4'},
{id:'5',title:'标题5'},
{id:'6',title:'标题6'}
]
},
// 计算属性：通过计算得到一个属性，避免v-if和v-for出现在同一个标签上
computed:{
firstNews(){
return this.news.length?this.news[0]:{};
},
partNews(){
return this.news.filter((item,index)=>{
return index>0;
});
}
}
})
</script>
</body>
</html>
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<ul>
<li v-for="item in goods">
商品名称:{{item.title}}
金额：{{item.price}}
数量：{{item.num}}
</li>
<!-- 使用mounted,只要操作的data数据不变，计算属性使用多次，就会用第一次计算的值 -->
<li>总金额：{{totalPrice}}</li>
<!-- 使用mounted，哪怕操作的data数据不变，函数也会调用两次-->
<li>总金额：{{totalPrice2()}}</li>
</ul> </div>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
news:[ ] ,
goods:[
{ id:1,title:"篮球",price:100,num:1 },
{ id:2,title:"篮球",price:300,num:1 },
{ id:3,title:"篮球",price:400,num:1 },
{ id:5,title:"篮球",price:500,num:3 },
{ id:5,title:"篮球",price:900,num:1 }
]
},
mounted() {
this.news=[
{id:'1',title:'标题1'},
{id:'2',title:'标题2'},
{id:'3',title:'标题3'},
{id:'4',title:'标题4'},
{id:'5',title:'标题5'},
{id:'6',title:'标题6'}
]
},
methods: {
totalPrice2(){
console.log("函数执行totalPrice....")
//pre上一次返回的值，开始循环是为0
return this.goods.reduce((prev,cur)=> prev+cur.price*cur.num,0)
}
},
computed:{
totalPrice(){
//pre上一次返回的值，开始循环是为0
console.log("totalPrice....")
return this.goods.reduce((prev,cur)=> prev+cur.price*cur.num,0)
}
}
})
</script>
</body>
</html>
结果显示
Vue2.0计算属性的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- vue2.0中的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...
- vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
- vue2.0之监听属性的使用心得及搭配计算属性的使用
我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果 ...
- Vue2.0源码阅读笔记（三）：计算属性
计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能. 一.计算属性初始化 Vue 在做数据初始化时,通过 in ...
- vue2.0 之计算属性和数据监听
计算属性computed <template> <div> <input type="text" name="" v-model= ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- vue2计算属性computed
详见vue2.0 API<计算属性> 需求: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id=&qu ...
- Vue2.0 【第三季】第2节 computed Option 计算选项
目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...
随机推荐
- Java 记录操作日志|对象修改细节
背景描述 由于业务涉及收入敏感信息,需记录数据变更前的内容和变更后的内容,但是不能为完成任务而硬编码,要适用于不同bean.针对这种情况,本文使用泛型.反射和基于AOP的自定义注解技术来完成,对对 ...
- 一篇辣鸡python写题目感想之——PTA自测-1 打印沙漏
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓"沙漏形状",是指每行 ...
- 大数据计算引擎 EasyMR 如何简单高效管理 Yarn 资源队列
设想一下,作为一个开发人员,你现在所在的公司有一套线上的 Hadoop 集群.A部门经常做一些定时的 BI 报表,B部门则经常使用软件做一些临时需求.那么他们肯定会遇到同时提交任务的场景,这个时候到底 ...
- git ---多用户管理
一.概述 相信大家都遇到过这样的问题,实际开发中需要在一台PC上用到 不同平台git的账号甚至同一个平台的多个账号(比如本人gitee .字自己在nas上搭建的gitea ,另外还有github账 ...
- oracle 存储过程 for loop 定时任务
记录. 是这么个事,要实现一个需求,当人员表里的数据有更新后需要告知其他系统更新他们自己的人员数据. 我想了一下,表里是有时间戳字段的,那我只要监听这个时间就行,拿到数据后用存储过程把数据插入到中间表 ...
- BZOJ2720 [Violet 5] 列队春游 题解
Problem 对于一个数列 \(S\),\(S_0= \infty\),设对于 \(S_i\),\(S_{a_i}\) 是 \(S_i\) 之前第一个大于等于 \(S_i\) 的数.给定 \(S\) ...
- Mysql规范50条
支付业务很大程度上依赖于数据库做支持,正确的设置数据库参数以及正确的使用数据库对非常重要,我这把自己之前的一些心得贴出来,抛砖引玉,大家可以把自己的一些心得分享出来供大家参考学习.一.数据库配置1. ...
- MSSQL 发布订阅，实现读写分离 SQL Server
https://blog.csdn.net/qq_32343577/article/details/82423393 -查询服务器的名称和实际计算机的名称,如果两者不一致,就需要修改. use mas ...
- vue_事件处理、表单数据自动收集、vue生命周期
事件处理 <html lang="en"> <head> <meta charset="UTF-8"> <title& ...
- 学习spring cloud记录8-nacos环境隔离nasespace
前言 nameSpace为最外层隔离,包括多个group,group包括多个service/data.namespace可以完成生产环境和开发环境这种隔离. 设置nameSpace 查看目前nacos ...