[Web 前端] 034 计算属性，侦听属性
0. 方便起见，定个轮廓
- 不妨记下方的程序为
code1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-xxx</title>
<script src="./vue.js"></script>
<style>
/* c */
</style>
</head>
<body>
<div id="app">
<!-- a -->
</div>
<script>
// b
</script>
</body>
</html>
1. 过滤器
- a 处改为以下代码
{{msg}} <br>
{{msg|capitalize}} <br>
{{price}} <br>
{{price|currency}} <br>
- b 处改为以下代码
new Vue({
el: "#app",
data: {
msg: "hello",
price: 20
},
filters: {
// 官网的例子
capitalize: function(val){
return val.charAt(0).toUpperCase() + val.slice(1);
},
currency: function(val){
return val + " $";
}
}
});
2. 计算属性
2.1
- a 处改为以下代码
<!-- 当 a 发生变化时，输出 a+1 -->
<input type="text" v-model="a"> <br>
{{a+1}} <br>
{{parseInt(a)+1}} <br>
{{b}} <br>
{{c()}} <br>
- b 处改为以下代码
var vm = new Vue({
el: "#app",
data: {
a: 1
},
computed: {
// 写业务逻辑，有缓存
b: function(){
return parseInt(this.a) + 1;
}
},
methods: {
c: function(){
return parseInt(this.a) + 1;
}
}
});
2.2
- a 处改为以下代码
<!-- 当 a 发生变化时，输出 a+1 -->
<input type="text" v-model="a"> <br>
{{b}} <br>
- b 处改为以下代码
var vm = new Vue({
el: "#app",
data: {
a: 1
},
computed: {
// 简单地说，设置时调用 set，输出时调用 get
b: {
// 默认就是 get 属性
get: function(){
return parseInt(this.a) + 1;
},
// 在控制台输入 vm.b = 10 运行照旧
set: function(value){
return this.a = value;
}
}
}
});
3. 监听属性
- a 处改为以下代码
<input type="text" v-model="firstName">
<input type="text" v-model="lastName"> <br>
{{firstName + lastName}} <br>
{{fullName}} <br>
{{num}}
- b 处改为以下代码
new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
num: 0
},
computed: {
fullName: function(){
return this.firstName + this.lastName;
}
},
watch: {
fullName: function(){
this.num++;
}
}
});
此为听“北京图灵学院的 《Web 公开课》”时所记笔记
这个课我是断断续续地听的，笔记更是断断续续地整理的。。。
这个课前后有两个老师，宇哥（比较正经）和浩哥（比较激情）
宇哥的课到这儿“戛然而止了”，后边浩哥从零开始讲的，我听了一部分，但没记笔记。。。
[Web 前端] 034 计算属性，侦听属性的更多相关文章
- [vue]计算和侦听属性(computed&watch)
先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- 六、vue侦听属性
$watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...
随机推荐
- Struts 2 实现Action的几种方式_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Action用于处理用户的请求,因此也被称为业务控制器.每个Action类就是一个工作单元,Struts 2框架负责将用 ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- Maven：mirror和repository
1 Repository(仓库) 1.1 Maven仓库主要有2种: remote repository:相当于公共的仓库,大家都能访问到,一般可以用URL的形式访问 local repository ...
- 【NOIP2016提高A组模拟8.19】(雅礼联考day2)公约数
题目 给定一个正整数,在[1,n]的范围内,求出有多少个无序数对(a,b)满足gcd(a,b)=a xor b. 分析 显然a=b是一定不满足, 我们设\(a>b\), 易得gcd(a,b)&l ...
- 020：reverse函数补充
补充reverse两点: 1.如若在反转url时,需要添加参数,那么可以传递 kwargs 参数到 reverse 函数中,实例代码如下: '}) ) 2.如若想添加查询字符串参数,则必须手动进行ur ...
- Python稀疏矩阵运算
import numpy as np import scipy import time import scipy.sparse as sparse t = [1]+[0]*4999 a = scipy ...
- 【BZOJ4565】 [Haoi2016]字符合并
Description 有一个长度为 n 的 01 串,你可以每次将相邻的 k 个字符合并,得到一个新的字符并获得一定分数.得到的新字 符和分数由这 k 个字符确定.你需要求出你能获得的最大分数. I ...
- 【bzoj3672&&uoj7】[Noi2014]购票
*题目描述: 今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会. 全国的城市构成了一棵以SZ市为根的有根树,每个城市与它的父亲用道路 ...
- sqli-labs(26)
0X01 测试闭合 单引号报错 双引号不报错 ’闭合 构造语句 过滤了空格和and ?id=' anandd 1=1%23 ?id='+anandd+1=1%23 百度一下 一去看源码 真的顶不住 ...
- 解决img标签与其它标签间隙问题？
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距 代码如下: <!DOCTYPE html> <html> <hea ...