[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 ...
随机推荐
- day_06 猜年龄游戏，三级菜单 ，求1 - 2 + 3 - 4 + 5...99的所有数的和（课后作业）
1.猜年龄游戏: 要求: 允许用户最多尝试3次 每尝试3次后,如果还没猜对,就问用户是否还想继续玩,如果回答Y或y, 就继续让其猜3次,以此往复,如果回答N或n,就退出程序 如果猜对了,有三次选择奖励 ...
- Help library 安装arcobjects for .NET异常问题
新建一个reg文件写入,也可以导出一个reg文件在上面重新写入. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\CLSID\{9DAA ...
- onload,domcontentload区别+onload详解
todo onLoad是的在页面所有文件加载完成后执行 DomContentLoad是Dom加载完成后执行,不必等待样式脚本和图片加载 domContentLoad更为合理, 原理: 如果是webki ...
- [BZOJ1059]:[ZJOI2007]矩阵游戏（二分图匹配）
题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...
- Mybatis 中在xxx.mapper书写模糊查询
1.在mybatis中,书写sql,有时候会有一些不细心,如: <!-- 首页商品 关键字搜索--> <select id="getGoodsByLikeTitle&quo ...
- route Cmd详解
第一条命令,配置外网网关: route -p add 0.0.0.0 mask 0.0.0.0 192.168.1.1 第二条命令,配置内网网关:route -p add 192.168.0.0 ma ...
- leetcode-easy-array-189 Rotate Array
mycode 75.59% class Solution(object): def rotate(self, nums, k): """ :type nums: Lis ...
- python 调用c++类方法（1）
myTest.cpp: #include<iostream> #include<vector> class MyTest { public: MyTest(); ~MyTest ...
- MySQL技术内幕 InnoDB存储引擎 之 InnoDB体系架构
后台线程 1.Master Thread 2.IO Thread 3.Purge Thread 4.Page Cleaner Thread 内存 重做日志在以下三种情况下将重做日志缓存中的内容刷新到 ...
- mysql在linux下连接超慢的问题及解决办法
今天一来公司发现mysql连接很慢很慢!!!!不知为啥!! 从其它地方连接MySQL数据库的时候,有时候很慢.慢的原因有可能是MySQL进行反向DNS解析造成的,这里简单介绍下原理,需要的朋友可以参考 ...