[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 ...
随机推荐
- 使用SpringBoot发邮件
SpringBoot中已有发邮件的工具包,只需要引用即可使用 1,pom引用 <dependency> <groupId>org.springframework.boot< ...
- 【BZOJ3684】大朋友和多叉树(拉格朗日反演)
题目链接 题意 求满足如下条件的多叉树个数: 1.每一个点的儿子个数在给定的集合 \(S\) 内 2.总的叶子节点树为 \(s\) 儿子之间有顺序关系,但节点是没有标号的. Sol 拉格朗日反演板子题 ...
- springboot项目作为其他项目子项目
<?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apache.org/P ...
- IP地址（参考百度百科）
题目1:用子网掩码划分网络时,如果划分8个子网,则需要4位.因为24-2>=8.(全0代表网络自身,全1代表广播地址,所以减2) 以C类地址为例,(1)8个子网,则4位子网,主机号为后4位,主机 ...
- 【shell】sed处理多行合并
有这么一个题 文件格式 table=t1 name owner address table=t2 id text col1 comment col5 table=t3 prod_name price ...
- c# linq 分组groupby
转载: https://www.cnblogs.com/cncc/p/9846390.html 一.先准备要使用的类: 1.Person类: class Person { public string ...
- linux lazarus 连接mssqlserver
1 . 从https://www.freetds.org/ 下载驱动源文件 2. 参照 https://www.freetds.org/userguide/config.htm 内容编译 3. 启动l ...
- 11.Linux date命令的用法
date命令常的日常应用 修改时间 date -s “2008/05/23 19:20″ 打包文件 tar zcvf log-$(date +$F).gz /home/admin/logs 同步阿 ...
- MongoDB操作：insert()
@Override public boolean inSert(String dbName, String collectionName, String[] keys, Object[] values ...
- 小程序的image图片显示
最近接触到了一点小程序的东西,跟我们平常的HTML还真不太一样,这里我先大概讲一下图片的显示问题, 小程序的图片用的是<image><image/>标签,他默认的大小是宽300 ...