Vue2.0 【第三季】第2节 computed Option 计算选项
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 计算选项的更多相关文章
- 用vue2.0实现点击选中active，其他选项互斥的效果
在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...
- Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递
目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...
- Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- Vue2.0 【第二季】第9节 Component 标签
目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
随机推荐
- HttpClient学习笔记
HttpClient相关的实体类官方文档地址:http://hc.apache.org/httpcomponents-client-ga/httpclient/apidocs/ 使用HttpClien ...
- Windows Server 2012 R2 强制卸载域控制器
本次实验要演示的是强制卸载域控制器并且在其他域控制器上删除不需要的服务器对象,这种情况在现实的生产使用环境中经常使用,每个企业每年都会有增减域控制器的时候,而且在减少了域控制器之后,原本的域还会继续使 ...
- cisco WLC开启portal认证,但是访问https无法跳转问题的解决
config network web-auth https-redirect enable版本8,及以上才支持 官方文档: http://www.cisco.com/c/zh_cn/support ...
- drf中的jwt使用与手动签发效验
jwt认证 1)session存储token,需要数据库参与,耗服务器资源.低效 2)缓存存token,需要缓存参与,高效,不易集群 3)客户端存token,服务器存签发与交易token的算法,高效, ...
- 浅谈javascript函数执行过程
javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...
- Spark和Hadoop MapReduce之间的比较
关于两者的讨论文章: https://www.zhihu.com/question/26568496 http://blog.jobbole.com/97150/ 文章通过多个角度对两者进行对比,根据 ...
- SWUST OJ 有趣的三位数(0319)
有趣的三位数(0319) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 158 Accepted: 62 Description ...
- Docker快速安装kafka
Docker快速安装kafka | 沈健的技术博客 盒子 盒子 博客 分类 标签 友链 搜索 文章目录 同样基于docker-compose安装,Docker快速部署nginx中有讲到,不在重述 1. ...
- HEXO进阶打赏
HEXO接近是最近有一些朋友提出的问题,然后我做了总结,如果你也在使用HEXO,不妨看看,应该会有些帮助. 1.博客部署样式出问题了怎么办? 2.电脑重装或者误删了本地博客怎么办? 3.想使用两台电脑 ...
- VMWare vCenter 4.x 数据库由SQL Express 迁移至SQL Server 2008 R2
默认安装下的 VMware vCenter 4.x 会在本地安装 SQL Express 2005 版本,如果你有需要迁移至 Full SQL Server版本比如 SQL Server 2008 R ...