第三节: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 ...
随机推荐
- JAVA里面的IO流(一)分类2(节点流和处理流及构造方法概要)
IO流根据处理对象的不同分为节点流和处理流. 直接对文件进行处理的流为节点流: 对流进行包装从而实现对文件的优化处理的流为处理流. 节点流类型: 可以看出,节点流主要分这几大类: 文件流 文件流构造方 ...
- 【Android UI】:Fragment官方文档
概述 Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragment组合在一起,放在一个单独的activity中来创建一个多界面区域的UI,并可以在多个activity ...
- jquery 监听input输入值事件
<html> <head> <title></title> <script type="text/javascript" sr ...
- 产品研发过程中UCD目标的制定与实现
摘 要:以用户为中心的设计(UCD, User-Centered Design)是保障产品具有较好用户体验(User Experience)的基本活动,其中可用性目标是有效衡量 UCD 活动最终效果的 ...
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- 3.使用CXF开发webService
CXF 简介 关于 Apache CXF Apache CXF = Celtix + XFire,Apache CXF 的前身叫 Apache CeltiXfire,现在已经正式更名为 Apache ...
- ecshop数据表说明
ecshop数据表说明 数据库结构说明,以及自己在后台备份不需要备份的表(红色字体是不需要备份的表)备份文件在FTP或者服务器上网站根目录下data\sqldata下 数据库采用mysql,共78张表 ...
- Entity FrameWork 单表对多实体
一个影片信息Clips表,四个字段:clipId,clipName,fileSize,fileName 方案一: [Table("Clips")] public class Cli ...
- json-smart 使用示例(推荐fastjson)
关于json库,请使用fastjson,这是我用过的最好用的json库! 地址:https://github.com/alibaba/fastjson ======================== ...
- 浏览器 的 session 如何保持?!
http://qindingsky.blog.163.com/blog/static/3122336200832853116360/ 在谈论session机制的时候,常常听到这样一种误解“只要关闭浏览 ...