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 属性是非常有用,在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍,加深印象。

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-25
  • 2021-04-21
  • 2021-11-06
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2018-04-11
  • 2020-09-26
  • 2022-02-17
  • 2022-12-23
相关资源
相似解决方案