[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 ...
随机推荐
- python设置图片背景和设置字体颜色大小
# -*- coding: utf-8 -*- """ Created on Wed Dec 11 22:37:30 2019 @author: Dell "& ...
- ESP8266 SPI通信
设备与设备之间的通信往往都伴随着总线的使用,而用得比较多的就当属于SPI总线和I2C总线,而恰巧NodeMcu也支持这两种总线通信 1. SPI总线——SPI类库的使用 SPI是串行外设接口(Seri ...
- 【SaltStack官方版】—— MANAGING THE JOB CACHE
MANAGING THE JOB CACHE The Salt Master maintains a job cache of all job executions which can be quer ...
- C++中的字符数组、字符指、字符串针（腾讯）
一.字符数组 1.定义时进行初始化的方式 (1)char c[12]={'I',' ','a','m',' ','h','a','p','p','y'};//最后两个元素自动补‘\0’(不是空格),其 ...
- 【leetcode】1219. Path with Maximum Gold
题目如下: In a gold mine grid of size m * n, each cell in this mine has an integer representing the amou ...
- 爬虫之Handler处理器和自定义Opener
一.Handler处理器和自定义Opener opener是 request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...
- 说下Java堆空间结构，及常用的jvm内存分析命令和工具
Java堆空间结构图:http://www.cnblogs.com/SaraMoring/p/5713732.html JVM内存状况查看方法和分析工具: http://blog.csdn.net/n ...
- [LeetCode]-DataBase-Nth Highest Salary
Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...
- 第十周java学习总结
目录 第十周java学习总结 学习内容 代码上传截图 代码链接 第十周java学习总结 学习内容 第12章 Java多线程机制 主要内容 Java中的线程 Thread类与线程的创建 线程的常用方法 ...
- 一、基础篇--1.1Java基础-包装类的装箱和拆箱
包装类:java是典型的面向对象编程,但是八种基本数据类型并不支持面向对象编程.基本类型的数据不具备对象的特性,没有属性和方法.沿用它们只是为了迎合人类根深蒂固的习惯,并的确能简单.有效地进行常规数据 ...