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. MVC请求管道

    下面是请求管道中的19个事件. (1)BeginRequest: 开始处理请求 (2)AuthenticateRequest授权验证请求,获取用户授权信息 (3):PostAuthenticateRe ...

  2. mysql每天弹出窗口检测更新关闭方式...

    右击计算机-->管理-->系统工具-->任务计划程序-->MySQL<如下图>,选中右键删除或者禁用即可... 更新分界线--------------------- ...

  3. ATM-JAVA程序 //程序有5处相同错误,找不出原因 转账功能没有实现,修改密码来不及实现了

    package JCC;//信1705-3 20173681 靳晨晨import java.io.BufferedReader;import java.io.File;import java.io.F ...

  4. RN与android原生开发混合后的环境报错问题

    RN与android原生开发混合后的环境报错问题 需要先安装nodejs$ yarn --version1.12.1更新当前版本yarn upgrade --latest安装 | Yarnhttps: ...

  5. 读QT5.7源码(三)Q_OBJECT 和QMetaObject

    Qt meta-object系统基于三个方面:  1.QObject提供一个基类,方便派生类使用meta-object系统的功能:  2.Q_OBJECT宏,在类的声明体内激活meta-object功 ...

  6. 第一周java测验感想

     在正式开学的第一周,建民老师就给我们来了一个下马威.我本身的编程基础比较差,不知道怎么去想,怎么去一步步的去完成这么一个工程.所以我在星期四的下午十分的痛苦…因为不知道怎么搞嘛.尽管在暑假的时候看了 ...

  7. C/C++编译、链接、运行的基础知识

    0.C/C++从源文件在编译器的作用下先编译成.s的汇编,然后在汇编器的作用下变成.o的可重定向目标文件,然后在链接器的作用下变成可执行文件 1.在项目中设置的编译寻找目录中的.h文件(一般就是inc ...

  8. The Little Prince-12/07

    The Little Prince-12/07 "My little man, where do you come from? What is this ‘where I live,‘ of ...

  9. The Little Prince-11/27

    The Little Prince-11/27    The little boy gradually realized that it is tiresome for children to be ...

  10. Linux 配置 JDK

    1. 上传 JDK 2. 解压文件 tar -xvf 文件名 3. 配置环境变量: 指令 vim /etc/profile 以上格式是不变的,使用时只改变 JAVA_HOME 和 JAVA_BIN 的 ...