Vue#计算属性
在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
</head>
<body>
<div id="app">
a= {{a}},
b={{b}},
c={{c}}
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
a:1
},
computed:{
b:function(){
return this.a*2015
},
c:function(){
return this.b+this.a
}
}
});
vm.a=2;
</script>
</body>
</html>
在线：
https://jsfiddle.net/miloer/veL2bkbf/1/
computed
- 类型：
Object - 详细：实例计算属性。getter 和 setter 的
this自动地绑定到实例。 - 示例：
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取，值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4 - 另见：
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计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
随机推荐
- 先进的React GUI编辑器 — Structor，所见即所得！
先进的React GUI编辑器 — Structor https://helmetrex.com/ 手把手教你基于 ES6 架构自己的 React Boilerplate 项目 http://www. ...
- php如何妩媚地生成执行的sql语句
会不会碰到这样一种情况呢?每次获取数据将数据和历史版本都有一定的差别,然而用ThinkPHP的addAll()函数,却会将已有的数据删掉再重新写入.这明显不是我们想要的.但自己写sql每次几十个字段也 ...
- 开发简单的Kafka应用
之前基于集群和单机安装过kafka,现在利用kafka提供的API构建一个简单的生产者消费者的项目示例,来跑通kafka的流程,具体过程如下: 首先使用eclipse for javaee建立一个ma ...
- Java中的Comparable接口和Comparator接口
Comparator位于包java.util下,比较器,是在集合外部定义排序.Comparable位于包java.lang下,代表当前对象可比较的,是在集合内部实现排序. Comparable代表一个 ...
- ABAP ole方式对EXCEL进行操作
DATA: excel TYPE ole2_object, workbook TYPE ole2_object, sheet TYPE ole2_object, ...
- Dnsmasq安装与配置-搭建本地DNS服务器 更干净更快无广告DNS解析
默认的情况下,我们平时上网用的本地DNS服务器都是使用电信或者联通的,但是这样也导致了不少的问题,首当其冲的就是上网时经常莫名地弹出广告,或者莫名的流量被消耗掉导致网速变慢.其次是部分网站域名不能正常 ...
- 【故障处理】mysql出现大量slave bin日志，将磁盘空间占满
master服务器IO线程 NO 问题描述:造成大量slave bin 日志 大量占用磁盘 排查解决步骤: 1.检查是配置的问题还是mysql数据库本身的故障 2.将master的机器 mysql_ ...
- Greedy:Paint Color(AOJ 0531)
涂颜料 题目大意:在一个1000000*1000000的矩阵中放入几块木板,问你这些木板把矩阵划分成了几个区域?输入会给左下角和右上角的坐标,输入W==0且H==0结束. 这一题是书上的作业题,书上有 ...
- python getopt.getopt 不能精确匹配的问题
代码:opts,argv = getopt.getopt(sys.argv[1:],('u:'),['ad','join','passwd=','domain=','dip=','test','ip= ...
- java jsp调用shell（带参数）脚本并返回值
test.jsp <%@ page language="java" import="java.util.List,java.util.ArrayList,java. ...