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

格式化输出结果

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

html

<div id="app">
<span v-text="newNumber"></span>
</div>

js

var vm = new Vue({
el:"#app",
data:{
number:120
},
computed:{
// 记得return 出来啊
newNumber:function(){
return this.number="¥"+this.number+'元'
}
}
})
用计算属性反转数组(倒序)

html

var data = [
{"title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/12"},
{"title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/15"},
{"title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/26"}
]
var vm = new Vue({
el:"#app",
data:{
items:data
},
computed:{
newItems:function(){
return this.items.reverse();
}
} })

computed 计算选项的更多相关文章

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

    目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...

  2. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  3. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  4. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

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

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

  6. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  7. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  8. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

随机推荐

  1. 利用JavaCSV API来读写csv文件

    http://blog.csdn.net/loongshawn/article/details/53423121 http://javacsv.sourceforge.net/ 转载请注明来源-作者@ ...

  2. 【Scala学习之一】 Scala基础语法

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  3. 常对象与this指针

    [1]示例代码 用代码说事,比较靠谱.请看下例: #include <QDebug> #include <QString> class Person { public: Per ...

  4. Linux基础命令---chfn

    chfn chfn指令可以改变通过finger指令查看到的信息.此信息存储在/etc/passwd文件中,并由Finger程序显示.LinuxFinger命令将显示可由chfn更改的四条信息:您的真名 ...

  5. GoldenGate 12.3 MA架构介绍系列(4)–Restful API介绍

    OGG 12.3 MA中最大的变化就是使用了restful api,在前面介绍的各个服务模块,其实就是引用restful api开发而来,这些API同时也提供对外的集成接口,详细接口可参考: http ...

  6. ubuntu 18.04下安装Hadoop

    在Ubuntu里装完Java环境后,接下来就开始学习安装Hadoop了,参照的是以下链接 https://blog.csdn.net/xuan314708889/article/details/805 ...

  7. git getting started

    2019/4/25-- after committing to blessed. modify dependency file to download file so as to get latest ...

  8. game to refactor for refactor

    first step, only aim to work. it works, but i have not seen the necessaty to use class yet. my quest ...

  9. Bootstrap表单样式

    <form class="form-horizontal" role="form"> <fieldset> <legend> ...

  10. CSM与UEFI

    最近公司产品部购置一批新电脑,但是预装的win10不能保证兼容老平台软件,于是安装win7系统的任务就落到了我的手中. 观察参数,是8代的U,产品说运维说无能为力,装不了win7.我在网上搜了一下,是 ...