Vue2.0 【第三季】第2节 computed Option 计算选项


第2节 computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……

一、格式化输出结果

我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。

主要的javascript代码:

computed:{
newPrice:function(){
return this.price='¥' + this.price + '元';
}
}

全部代码:

<!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>

浏览器效果:

二、用计算属性反转数组

例如:我们得到了一个新闻列表的数组,它的顺序是安装新闻时间的顺序正序排列的,也就是早反生的新闻排在前面。这是反人类的,我们需要给它反转。这时我们就可以用到我们的计算属性了。

没有排序的新闻列表,是安装日期正序排列的。

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原生方法给数组作了反转。

computed:{
reverseNews:function(){
return this.newsList.reverse();
}
}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>computed</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>computed</h1>
<hr>
<div id="app">
<p>{{newPrice}}</p>
<ul>
<li v-for="item in reversNews">{{item.title}}-{{item.date}}</li>
</ul>
</div> <script type="text/javascript">
var newsList=[
{title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
{title:'日本第二大准航母服役 外媒:针对中国潜艇',date:'2017/3/12'},
{title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
{title:'起底“最短命副市长”:不到40天落马,全家被查',date:'2017/3/23'},
]; var app = new Vue({
el:'#app',
data:{
price:100,
newsList:newsList
},
computed:{
newPrice:function(){
return this.price='¥' + this.price + '元';
},
reversNews:function(){
return this.newsList.reverse();
}
}
})
</script>
</body>
</html>

浏览器效果:

总结:computed 属性是非常有用,在输出数据前可以轻松的改变数据。

Vue2.0 【第三季】第2节 computed Option 计算选项的更多相关文章

  1. 用vue2.0实现点击选中active,其他选项互斥的效果

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...

  2. Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递

    目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...

  3. Vue2.0 【第一季】第3节 v-for指令:解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  4. Vue2.0 【第二季】第9节 Component 标签

    目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...

  5. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  6. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  7. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  8. Vue2.0 【第二季】第5节 Template制作模板

    目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...

  9. Vue2.0 【第二季】第4节 Vue的生命周期(钩子函数)

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

随机推荐

  1. python学习笔记(8)迭代器和生成器

    迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...

  2. @Value默认值填null

    @Value("${topology.position.spout.maxpending:#{null}}") private Integer spoutMaxPending; @ ...

  3. BZOJ 1~10 精简题解

    从这星期起,我开始了怒刷BZOJ的旅程.这几天刷了10道题(由于"档期"的原因,所以有几道题没打完-..捂脸--..) 精简题解: 1000 A+B Problem --.. [B ...

  4. <JZOJ4726>种花

    挺有意思的贪心 神奇的贪心 #include<cstdio> #include<iostream> #include<cstring> #include<al ...

  5. 是谁收购了被谷歌私藏7年之久的Zagat?

    国内餐饮行业的风口似乎总是执着于"价格"上,无论是天天搞特价的外卖,还是优惠不停歇的团购网站,都将"价格"当做了竞争的杀手锏.即使是网红奶茶.甜品之类的,也是将 ...

  6. 秒搭Kubernetes之使用Rancher

    Rancher 在接触Docker和K8s的前阶段就耳闻目睹到Rancher,但是没有进一步接触过.直到将K8s搭建完成.才进一步了学习与实践Rancher. Rancher是简便易用的容器管理.其中 ...

  7. <USACO09DEC>过路费Cow Toll Pathsの思路

    啊好气 在洛谷上A了之后 隔壁jzoj总wa 迷茫了很久.发现那题要文件输入输出 生气 肥肠不爽 Description 跟所有人一样,农夫约翰以着宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦 ...

  8. memcached单点登录配置

    域名 www.lxy.comblog.lxy.comnews.lxy.comshop.lxy.com php配置 session.save_handler = memcache session写mem ...

  9. -scp Linux之间复制文件和目录

    scp 简介 scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速 ...

  10. ip修改成域名

    将ip修改成域名,这样的话可以使程序变得更加健壮,别人不能直接看见你的ip地址. 后来总结下分享给大家.首先找到hosts文件的位置,这个文件是系统dns默认查找的文件. windows 系统:C:\ ...