Vue（十一）计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
</head> <body> <div id="app"> <!-- 1. 普通属性 -->
<h2>{{msg}}</h2>
<!-- 对数据处理再显示 -->
<h3>{{msg.split('').reverse().join('')}}</h3> <!-- 2. 计算属性 -->
<h2>{{msg2}}</h2>
<h3>{{reverseMsg}}</h2> <hr> <button v-on:click="change">修改msg的值</button> <hr> <h1>{{num1}}</h1>
<h1>{{num2}}</h1>
<h1>{{getNum2()}}</h1> <hr> <button v-on:click="changeNum1">修改num1的值</button>
<button onclick="fn()">测试</button> <hr> <!-- 计算属性的get、set方法 -->
<button @click="change2">修改计算属性</button> </div>
<script> var vm = new Vue({
el:'#app',
data:{ //普通属性
msg:'Hello World!~',
num1:9
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return "你好，世界"
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg
return this.msg.split('').reverse().join('');
},
/* num2:function(){
console.log(new Date());
return this.num1-1;
}, */
num2:{
get:function(){
console.log(new Date());
return this.num1-1;
},
set:function(val){
this.num1=111;
}
}
},
methods:{
change(){
this.msg='Hello Kitty!~'
},
changeNum1(){
this.num1=666
},
getNum2(){
console.log(new Date());
return this.num1-1;
},
change2(){
this.num2=111;
}
}
}) function fn(){
setInterval(function(){
/* 计算属性与方法区别 */
/* console.log(vm.num2); */
console.log(vm.getNum2());
},1000)
} </script> </body> </html>
Vue（十一）计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
随机推荐
- js 2017 - 2
设置360为极速模式 <meta name='renderer' content='webkit'> css3超出隐藏 .ellipsis { // 超出一行 width: 100%; ...
- CDOJ 1965 连通域统计【DFS】
求连通域个数,简单题 #include <bits/stdc++.h> using namespace std; const int INF = 0x3f3f3f3f; typedef l ...
- luogu P2742 【模板】二维凸包 / [USACO5.1]圈奶牛Fencing the Cows
题解: 二维凸包裸题 按照x坐标为第一关键字,y坐标为第二关键字排序 然后相邻判断叉积用单调队列搞过去 正反都做一次就好了 代码: #include <bits/stdc++.h> usi ...
- C# 之 反射性能优化3
阅读目录 开始 用Delegate优化反射的缺点 用Delegate优化反射的优点 用CodeDOM优化反射的优点 如何用好CodeDOM? 用CodeDOM优化反射的缺点 能不能不使用委托? 根据反 ...
- Codeforces 436E Cardboard Box (看题解)
Cardboard Box 贪了个半天贪不对, 我发现我根本就不会贪心. 我们先按b排序, 然后枚举选两颗心的b的最大值, 在这个之前的肯定都要选一个, 因为前面的要是一个都没选的话, 你可以把当前选 ...
- python --判断列表重复
一.判断单个列表中的元素是否存在重复 使用set方法去重后,和原list进行对比,如果相等,那么说明原列表无重复,如果存在重复,说明列表存在重复 def is_repect_all(L): repea ...
- TopCoder SRM500 Div1 500 分治
原文链接https://www.cnblogs.com/zhouzhendong/p/SRM500-500.html SRM500 Div1 500 没想到 double 的精度居然没有爆-- 考虑以 ...
- day7 [id]，[is]，编码
老师的笔记: 字典:dic = {'name':'alex'} 1,增 dic['k'] = 'v' 有键值对,则覆盖 setdefault 有键值对,不添加 dic.setdefault('k1', ...
- Linux 文件目录结构
/ 文件系统的入口,最高一级目录 /bin 存放系统所需的基本命令 /boot 包含Linux内核及系统引导程序所需要的文件 ( 如连接文件,镜像文件等 ...
- eclipse里面svn比较之前版本的代码
team——显示资源历史记录比较