[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 ...
随机推荐
- 机器学习降维--SVD奇异值分解
奇异值分解是有着很明显的物理意义,将一个比较复杂的矩阵用更小更简单的几个子矩阵的相乘来表示,这些小矩阵描述的是矩阵的重要的特性,让机器学会抽取重要的特征,SVD是一个重要的方法. 所以SVD不仅是一个 ...
- ip addr详解
Windows上查看IP地址是ipconfig, Linux上是ifconfig,但是Linux上还有一个命令叫ip addr可以查看IP地址. ip addr : lo: <LOOPBACK, ...
- js 页面 保持状态 的方法
A -> B 带参数进去B页面, 刷新B页面还 保持状态 单机下一页, 改变请求参数, A->B 不带参数进去B页面 (不存在)当前状态保存在cookies中, 刷新页面,判断cooki ...
- 解决eclipse部署maven项目无法导入lib的问题
eclipse版本为2018-12(4.10.0) 1.默认tomcat的server配置 改成: 2.项目部署 按上面的配置,项目会部署到你配置的本地tomcat的webapps目录下. 部署了项目 ...
- sh_08_石头剪刀布
sh_08_石头剪刀布 # 导入随机工具包 # 注意:在导入工具包的时候,应该将导入的语句,放在文件的顶部 # 因为,这样可以方便下方的代码,在任何需要的时候,使用工具包中的工具 import ran ...
- VMware NAT 静态IP模式下上网
自从开始学Linux之后,对使用NAT模式上网,很是困惑.具体原理,还待求证. 使用方法(VMware): 简介: wmware在NAT使用方面很是轻松 打开本地的网络适配器. 修改虚拟网卡VMnet ...
- Java文件中代码
public class MyTextView extends TextView { //在用代码创建的时候调用 public MyTextView(Context context) { this(c ...
- python常用笔记
A trick when you want to flatten a matrix X of shape (a,b,c,d) to a matrix X_flatten of shape (b*c*d ...
- legend3---2、网站的代码里面的/也是代表根目录
legend3---2.网站的代码里面的/也是代表根目录 一.总结 一句话总结: 不过这个根目录在public下面 1.mysql删除数据库命令? drop database <数据库名> ...
- MYSQL，分别用一条语句交换两列的值与两行的值
测试表: CREATE TABLE `test` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, ` DEFAULT CHARSET=utf8 ...