一、基础计算模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{firstName + " " + lastName}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"}});
</script>
</body>
</html>

升级一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{firstName+" "+lastName}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},//计算属性computed: {fallName: function () {return this.firstName + this.lastName;}}});
</script>
</body>
</html>

二、计算属性computed

有缓存机制，会用以前计算的结果
当计算的属性发生变化时会执行一次，当修改的数据不属于计算属性时，会从缓存中查询，不会执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",age: 22},//计算属性computed: {fullName: function () {console.log("计算了一次")return this.firstName + this.lastName;}}});
</script>
</body>
</html>

三、方法methods

无缓存机制，不管修改什么输入都会执行一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName()}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",age: 22},methods: {fullName: function () {console.log("计算了一次")return this.firstName + this.lastName;}}});
</script>
</body>
</html>

四、侦听器watch

和计算属性一样有缓存机制，只要我侦听的数据不发生改变，我就不会执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName()}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",fullName: "gb lfy",age: 22},watch: {firstName: function () {console.log("计算了一次");this.firstName + this.lastName;},lastName: function () {console.log("计算了一次");this.firstName + this.lastName;},}});
</script>
</body>
</html>

五、总结

如果一个功能既可以用计算属性、方法、侦听器实现，建议优先选择计算属性

六、源码地址

Vue计算属性、方法、侦听器相关推荐

5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
(第二篇)Vue计算属性、侦听器、过滤器
1.计算属性和侦听器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Vue 计算属性与侦听器
这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch). 在之前,我们学习过 vue 表达式插值: <div id="example& ...
Vue——计算属性与侦听器
目录一.计算属性 1.基本使用 2.复杂使用 3.getter和setter 4.计算属性和methods的对比二.侦听器 1.watch的用法一.计算属性 1.基本使用现在有变量姓氏和名 ...
Vue.js 计算属性和侦听器
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性一.实例演示,v-if,v-for,v-model,v-bind,v-on 方法含义 v-bin ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...

Vue计算属性、方法、侦听器

文章目录

一、基础计算模板

二、计算属性computed

三、方法methods

四、侦听器watch

五、总结

六、源码地址

Vue计算属性、方法、侦听器相关推荐

最新文章

热门文章