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的更多相关文章

  1. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

  2. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  3. vuex bug & vue computed setter

    vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...

  4. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  5. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  6. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  7. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...

  8. vue computed 可以使用getter和setter

    var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

  9. Vue -computed传参数

    vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...

随机推荐

  1. 五、react中父子组件间如何传值

    1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...

  2. vue中的过滤器

    过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...

  3. 重温 JSP 与 Servlet

    Java Web使用SSH框架多了,很多基础的 JSP 与 Servlet 的东西都忘记了.最近在 JSP 标签 和 Struts2 包装的 Session 对象的混合使用时弄晕了,就翻书温习下. J ...

  4. Access数据库远程连接的实用方法

    一般在远程文件夹开启文件共享即可通过像平常一样用连接字符串访问,注意共享的读写权限. 远程(如通过互联网)连接access数据库的示例: 首先,需要使用TCP/IP,ADO及XML(需要安装Micro ...

  5. 零基础快速入门SpringBoot2.0教程 （二）

    一.SpringBoot2.x使用Dev-tool热部署 简介:介绍什么是热部署,使用springboot结合dev-tool工具,快速加载启动应用 官方地址:https://docs.spring. ...

  6. common-fileupload组件实现java文件上传和下载

    简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  7. c++ 程序设计question 001:我们的开发工具是什么？

    我们使用的开发工具是dev cpp (c plus plus),这是一个集成开发环境,我们称之为IDE(integrated development environment)

  8. swiper动画效果

    参考swiper官方网站:http://www.swiper.com.cn/ Swiper常用于移动端网站的内容触摸滑动: 结构展示:   纯javascript打造的滑动特效插件,面向手机.平板电脑 ...

  9. k8s资源配置清单的书写格式（yaml文件）

    yaml文件书写格式:5大类:apiVersion: 选择kubectl api-versions里面存在的版本kind: 选择kubectl api-resources结果中的对象资源metadat ...

  10. Javascript 模块化指北

    前言 随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.js),桌面端(PC.Android.iOS),乃至于物联网设备(IoT),其中 JavaScr ...