vue - computed
computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。
一、格式化输出结果:
我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。
主要的javascript代码:
1
2
3
4
5
|
computed:{
newPrice:function(){
return this.price='¥' + this.price + '元';
}
}
|
全部代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Computed Option 计算选项</title>
</head>
<body>
<h1>Computed Option 计算选项</h1>
<hr>
<div id="app">
{{newPrice}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
price:100
},
computed:{
newPrice:function(){
return this.price='¥' + this.price + '元';
}
}
})
</script>
</body>
</html>
|
现在输出的结果就是:¥100元。
二、用计算属性反转数组
例如:我们得到了一个新闻列表的数组,它的顺序是安装新闻时间的顺序正序排列的,也就是早反生的新闻排在前面。这是反人类的,我们需要给他反转。这时我们就可以用到我们的计算属性了。
没有排序的新闻列表,是安装日期正序排列的。
1
2
3
4
5
6
|
var newsList=[
{title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
{title:'日本第二大准航母服役 外媒:针对中国潜艇',date:'2017/3/12'},
{title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
{title:'起底“最短命副市长”:不到40天落马,全家被查',date:'2017/3/23'},
];
|
我们希望输出的结果:
- 起底“最短命副市长”:不到40天落马,全家被查-2017/3/23
- 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
- 日本第二大准航母服役 外媒:针对中国潜艇-2017/3/12
- 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10
我们的在computed里的javascript代码:我们用js原生方法给数组作了反转。
1
2
3
4
5
|
computed:{
reverseNews:function(){
return this.newsList.reverse();
}
}
|
总结:computed 属性是非常有用,在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍,加深印象。
vue - computed的更多相关文章
- vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
- vuex bug & vue computed setter
vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...
- vue computed、methods、watch的区别
1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...
- Vue computed属性
computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- vue computed的执行问题
1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...
- vue computed 可以使用getter和setter
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...
- Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...
随机推荐
- IOS 模仿有storyboard的项目控制器的创建
● 先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@ ...
- World Wind Java开发之三 显示状态栏信息(转)
http://blog.csdn.net/giser_whu/article/details/40920315 先来看下本篇博客索要达到的效果: 找到源码下的gov.nasa.worldwind.ut ...
- noip模拟赛#39
昨晚打开的题想了一会发现都不会后决定慢慢想.然后早上开校会的时候莫名其妙的都想出来了... T1:m=100,ai=50000,i<=5.1到m的数每个数只能用一次,判断是否能够有这些数的某些数 ...
- Nginx+proxy实现简单的负载均衡
环境说明:操作系统centos6.6 64位web操纵系统是:web1=192.168.10.10(LAMP) web2=192.168.10.11(LNMP),这里只是测试nginx实现负载均衡效果 ...
- C语言exp()函数:e的次幂函数(以e为底的x次方值)
头文件:#include <math.h> exp()用来计算以e 为底的x 次方值,即ex 值,然后将结果返回.其原型为: double exp(double x); [返回值]返 ...
- python_57_高阶函数
变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. def add(a,b,f): return f(a)+f(b) res=add(-3,- ...
- 安装mysql提示This application requires .NET framework 4.0.
问题描述:安装MySQL社区版时遇到This application requires .NET framework 4.0. 解决方法:在http://search.microsoft.com/zh ...
- Java 对数组的筛选
在Java里面 一般对一个数组进行筛选,去剔除一些元素,一般做法是用临时数组来存储,把符合条件的元素加入到新数组中,虽然数组有移除的方法但是 是线程不安全的: 而用迭代器Iterator,可以在遍历的 ...
- 最常用且非常重要的Linux命令
1.针对文件或目录类 cd: cat: ls: pwd: ln: mv: cp: vi.vim: find: mkdir: touch: echo: rm: chmod: chown: chattr: ...
- Python_循环判断表达式
一.if判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. if判断结构: if 条件: 动作 elif 条件: 动作 else: 动作 if判断年龄: age_of_princal ...