computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。
一、格式化输出结果:
我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。
主要的javascript代码:
|
1
2
3
4
5
|
{
{
;
}
}
|
全部代码:
|
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>
>
<head>
>
</script>
</title>
</head>
<body>
</h1>
<hr>
>
{{newPrice}}
</div>
>
{
,
{
100
,
{
{
;
}
}
)
</script>
</body>
</html>
|
现在输出的结果就是:¥100元。
二、用计算属性反转数组
例如:我们得到了一个新闻列表的数组,它的顺序是安装新闻时间的顺序正序排列的,也就是早反生的新闻排在前面。这是反人类的,我们需要给他反转。这时我们就可以用到我们的计算属性了。
没有排序的新闻列表,是安装日期正序排列的。
|
1
2
3
4
5
6
|
[
,
,
,
,
;
|
我们希望输出的结果:
- 起底“最短命副市长”:不到40天落马,全家被查-2017/3/23
- 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
- 日本第二大准航母服役 外媒:针对中国潜艇-2017/3/12
- 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10
我们的在computed里的javascript代码:我们用js原生方法给数组作了反转。
|
1
2
3
4
5
|
{
{
;
}
}
|
总结:computed 属性是非常有用,在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍,加深印象。