第三节:Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新。
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <input id="num" type="text" v-model="msg" /> <p>{{isEven}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { _msg: 1, NowTime: "" }, computed: { //计算属性 msg: { get: function() { if (this.$data._msg >= 0) { return this.$data._msg; } return 0; }, set: function(value) { var a = parseInt(value); if (a >= 0) { this.$data._msg = a; } else { this.$data._msg = 0; } console.log("msg:" + this.$data._msg); } }, isEven: { get: function() { if (this.$data._msg % 2 != 0) { return false; } else { return true; } } }, isOdd: function() { //只有一个function的时候,就表示get属性 return false; } } }); </script> </html>
第三节:Vue计算属性的更多相关文章
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性,v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
随机推荐
- ruby 学习笔记 2 -变量
变量 在ruby的世界里,变量有5种,全局变量 局部变量 实例变量 常量 类变量以及伪变量 常用的: 全局: 在全局使用,使用$开头,因为是全局的,所以在任何的代码例子中都可以改变其值,造成混乱,所以 ...
- MongoDB学习笔记—02 MongoDB入门
Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...
- 基于VC的声音文件操作(五)
(六)读取波形文件的实例 1.打开文件后,可通过HMMO句柄获得文件中的波形部份:MMCKINFO mmckinfo;mmckinfo.fccType = mmioFOURCC('W','A','V' ...
- firefox安装firebug\XPath Checker
XPath Checker安装,打开下面地址安装: https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/ 安装XPath Chec ...
- Handler机制来处理子线程去更新UI线程控件
public class HandlerTestActivity extends Activity { private TextView tv; private static final int UP ...
- php-empty()
$arr = array(array(),array()); 原来empty($arr)值为true哦
- RHEL5.8配置NFS服务
机器配置:4C+16GB 操作系统:RedHat Enterprise Linux 5.8 NFS基础 NFS(Network File System)是Linux系统之间使用最为广泛的文件共享协议, ...
- display:block 不起作用
jquery中$("#Main").css("display","none"); $("#Day").css('disp ...
- 重制AdvanceWars第一步 -- 搞定地图
首先来聊下高级战争吧Advance Wars,由任天堂旗下的Intelligent Systems开发的战棋游戏.初作诞生于GBA上,后来继续跟进了高战2黑洞崛,而后在下一代掌机DS上也出了三代续作高 ...
- 需要知道关于struct的一些事情
前言 重构代码的时候,会遇到长参数的方法,此时就需要使用“引入参数对象”来封装这些参数.大多数时候,这些参数都是简单类型,而且所有参数的值占用的空间也不是非常的大,此时使用对象真的好吗?对象的特性是堆 ...