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. Spark学习之路 (十六)SparkCore的源码解读(二)spark-submit提交脚本

    一.概述 上一篇主要是介绍了spark启动的一些脚本,这篇主要分析一下Spark源码中提交任务脚本的处理逻辑,从spark-submit一步步深入进去看看任务提交的整体流程,首先看一下整体的流程概要图 ...

  2. tomcat2章1

    package ex02.pyrmont; import java.io.File; public class Constants { public static final String WEB_R ...

  3. mysql-day06

    ##视图 - 什么是视图:在数据库中存在多种对象,表和视图都是数据库中的对象,创建视图时名称不能和表重名,视图实际上就代表一段sql查询语句,也可以理解成视图是一张虚拟的表,此虚拟表中的数据会随着原表 ...

  4. Symfony2学习笔记之事件分配器

    ----EventDispatcher组件使用 简介:       面向对象编程已经在确保代码的可扩展性方面走过了很长一段路.它是通过创建一些责任明确的类,让它们之间变得更加灵活,开发者可以通过继承这 ...

  5. linux系统电视盒子到底是什么

    经常看到各种大神说今天刷了什么linux系统可以干嘛干嘛了,刷了乌班图可以干嘛干嘛了,但是身为一个小白,对这种名词都是一知半解.所以这边给大家科普一下,什么是linux系统?电视盒子刷了这个可以干啥? ...

  6. build docker deivcemapper

    1.创建一个虚拟快设备 dd if=/dev/zero of=4G.img bs=1M count=4096 2.创建loop device 可以先用losetup -f 查看空闲的loop设备 lo ...

  7. Java 高级开发必修知识---内部类

    摘自:http://www.cnblogs.com/lsy131479/p/8798912.html Java 内部类分为: 1)成员内部类 2)静态嵌套类 3)方法内部类 4)匿名内部类 内部类的共 ...

  8. Selenium在Firefox中踩过的

    本文转至 http://www.51testing.com/html/11/n-3711311.html,作者对webdriver在Firefox中设置profile配置项挺熟的,是用Python实现 ...

  9. php stomp.dll 下载地址

    http://pecl.php.net/package/stomp/1.0.9/windows 查看方法,打开phpinfo

  10. android 颜色值参考,(有颜色图

    ) 2011-10-13 19:55:30| 分类: android | 标签:android颜色值|字号大中小 订阅 Android 常用RGB值以及中英文名称   颜 色 RGB值 英文名 中文名 ...