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. JavaScript--元素对象方法setAttribute() 和appendChild()

    appendChild() 方法可向节点的子节点列表的末尾添加新的子节点 setAttribute() 方法创建或改变某个新属性.如果指定属性已经存在,则只设置该值 <!DOCTYPE html ...

  2. 【Hbase学习之五】HBase MapReduce

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-2.6.5 hbase-0.98.12.1-h ...

  3. Linux基础命令---切换用户su

    su 临时切换身份到另外一个用户,使用su切换用户之后,不会改变当前的工作目录,但是会改变一些环境变量. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUS ...

  4. PHP框架CI CodeIgniter 的log_message开启日志记录方法

    PHP框架CI CodeIgniter 的log_message开启日志记录方法 第一步:index.php文件,修改环境为开发环境define(‘ENVIRONMENT’, ‘development ...

  5. 自学java第六周的总结

    在这个星期里,我主要将以前看过的复习了一遍,并且阅读并做了相关的题. 下个星期继续努力.

  6. sass中的循环判断条件语句

    @if $lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; @mixin inline-b ...

  7. 有道词典翻译(携带请求头和post参数请求)

    一.静态爬取页面信息 有道翻译网址:http://fanyi.youdao.com/ 在翻译中输入python 找到接口和请求的方式 参数是From Data类型 需要把参数数据转换为字典, 复制粘贴 ...

  8. Sqring核心概念

    Spring  是大规模企业级框架,用户数量多,数据规模大,功能众多,业务复杂, 性能和安全要求高   灵活多变 Spring框架是轻量级的框架,javaEE的春天,当前主流的框架,一站式的企业应用开 ...

  9. Oracle初级第一天

    oracle卸载 运行regedit,删除HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\ ...

  10. QQ项目(续)

    1.项目查找好友的原理 sql:select * from qquser where account in(select friendAccount from friend where userAcc ...