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 依赖 ...
随机推荐
- MySQL 官方 Docker 镜像的使用
首先是pull image,这里我拉取的是5.6.35: $ sudo docker pull mysql:5.6.35 拉下来以后大可以按照官方的说明无脑启动,但是外部无法访问,所以绑定端口: $ ...
- python2 python3 转换，兼容
0. 1.参考 https://docs.python.org/3/library/urllib.html urllib is a package that collects several modu ...
- Codeforces 666E E - Forensic Examination SA + 莫队 + 线段树
E - Forensic Examination 我也不知道为什么这个复杂度能过, 而且跑得还挺快, 数据比较水? 在sa上二分出上下界, 然后莫队 + 线段树维护区间众数. #include< ...
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
- BZOJ1856 [Scoi2010]字符串 数论
原文链接http://www.cnblogs.com/zhouzhendong/p/8084577.html 题目传送门 - BZOJ1856 题意概括 找出由n个1,m个0组成的字符串,且任意前几个 ...
- PAT (Basic Level) Practise - 我要通过！
“答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...
- python3解析库lxml
阅读目录 1.python库lxml的安装 2.XPath常用规则 (1)读取文本解析节点 (2)读取HTML文件进行解析 (3)获取所有节点 (4)获取子节点 (5)获取父节点 (6)属性匹配 (7 ...
- Junit4单元测试的基本用法
看了一些Junit4的视频,简单了解了Junit4的一些基本用法,整理记录一下. 环境搭建 这里使用的开发工具是MyEclipse,首先新建一个Java工程,将Junit4的jar包引入,eclips ...
- Java并发编程：volatile关键字解析zz
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
- os模块、os.path模块、shutil模块、configparser模块、subprocess模块
一.os模块 os指的是操作系统 该模块主要用于处理与操作系统相关的操作,常用的是文件操作(读.写.删.复制.重命名). os.getcwd() 获取当前文件所在的文件夹路径 os.chdir() ...