computed 计算选项
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 计算选项的更多相关文章
- Vue2.0 【第三季】第2节 computed Option 计算选项
目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- Vue(七):computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- computed 计算属性
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...
随机推荐
- C# SQLite 数据库操作
C# SQLite 数据库操作学习 运行环境:Window7 64bit,.NetFramework4.61,C# 7.0 参考: SQLite 官网 SQL As Understood By SQL ...
- python 读csv格式的文件
对于大多数的CSV 格式的数据读写问题,都可以使用csv 库 1. 直接读csv 以下是要操作的csv文件内容 import csv with open(r'C:\Temp\f.csv') as f: ...
- 【转】Kylin介绍 (很有用)
转:http://blog.csdn.net/yu616568/article/details/48103415 Kylin是ebay开发的一套OLAP系统,与Mondrian不同的是,它是一个MOL ...
- Java并发编程1--synchronized关键字用法详解
1.synchronized的作用 首先synchronized可以修饰方法或代码块,可以保证同一时刻只有一个线程可以执行这个方法或代码块,从而达到同步的效果,同时可以保证共享变量的内存可见性 2.s ...
- android studio eclipse keymap theme 快捷键 主题风格设置
android studio eclipse keymap theme 快捷键 主题风格设置 将Android Studio的快捷键设置与eclipse一致,使用习惯的快捷键才顺手.Mac系统下:进入 ...
- mysql-day06
##视图 - 什么是视图:在数据库中存在多种对象,表和视图都是数据库中的对象,创建视图时名称不能和表重名,视图实际上就代表一段sql查询语句,也可以理解成视图是一张虚拟的表,此虚拟表中的数据会随着原表 ...
- 动态创建生成lambd表达式
基于网上找的一段代码进行修改,目前扩展了NotContains方法的实现 using System; using System.Collections.Generic; using System.Co ...
- 大数据学习路线:Hadoop集群同步技术分享
今天给大家带来的技术分享是——Hadoop集群同步. 一.同步方式 选择一个机器,作为时间服务器(这里选择hadoop01),所有的机器与这台集群时间进行定时的同步,比如,每隔十分钟,同步一次时间. ...
- js 实现几分钟前、几小时前、几天前,以及几分钟后、几小时后、几天前后
js 实现几分钟前.几小时前.几天前,以及几分钟后.几小时后.几天前后 /* * * 把传入的时间戳与当前时间比较,计算几分钟前.几小时前.几天前,以及几分钟后.几小时后.几天前后 * unixtim ...
- JavaScript实现全选功能
最终效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...