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 ...
随机推荐
- Acperience (英语阅读 + 数学推导)
#include<bits/stdc++.h> using namespace std; int main(){ int T,n,m;scanf("%d",&T ...
- 20155228 实验三 敏捷开发与XP实践
20155228 实验三 敏捷开发与XP实践 实验内容 1. XP基础 2. XP核心实践 3. 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)>& ...
- win7 64位 python启动报错:无法启动此程序,因为计算机中丢失api-ms-win-crt-process-l1-1-0.dll
安装python3.7,安装成功后,在cmd窗口输入python检查是否安装成功,报错:无法启动此程序,因为计算机中丢失api-ms-win-crt-process-l1-1-0.dll 在网上查询了 ...
- Java Socket NIO入门
Java Socket.SocketServer的读写.连接事件监听,都是阻塞式的.Java提供了另外一种非阻塞式读写.连接事件监听方式——NIO.本文简单的介绍一个NIO Socket入门例子,原理 ...
- Docker相关知识整理
一.进入和退出docker容器 使用docker ps查看容器id docker exec -it containerId /bin/bash //进入容器 Ctrl + P + Q //退出容器 二 ...
- こだわり者いろはちゃん / Iroha's Obsession (暴力枚举)
题目链接:http://abc042.contest.atcoder.jp/tasks/arc058_a Time limit : 2sec / Memory limit : 256MB Score ...
- OSI七层详解
OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯,因此其最主要的功能就是帮助不同类型的主机实现数据传输 . 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于 ...
- 基于SecureCRT的测试环境的克隆的linux/vi相关命令
#chmod -R 777*; 参数-R:对当前目录下的所有档案与子目录进行相同的权限 变更(即以递归的方式逐个变更). *:通配符,指的是当前目录下的所有文件及目录. 所有文件及其子目录的文件拥有者 ...
- 利用apache伪静态技术防止盗链
(在我们制作网站的过程中,可能会遇到这样的问题,就是其他的网站直接盗用了我们网站的图片或css或js,这样可能会大大增加我们自己网站的负载. 所以,我们应该考虑一下怎样防止这样的事情发生.) 下面我们 ...
- modelform添加属性
暗暗啊