<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ reversedMessage }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } /* // 相当于 reversedMessage: { get(){ return this.message.split('').reverse().join('') } } */ } }); </script> </body> </html>
解释:我们在属性computed中定义了计算属性reversedMessage,这里提供的函数将作为计算属性reversedMessage的getter函数。
计算属性默认只有getter,不过我们可以提供一个setter。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ reversedMessage }}</p> <input type="text" v-model="reversedMessage" /> </div> <script> new Vue({ el: '#app', data: { message: 'hello' }, computed: { reversedMessage: { get(){ return this.message.split('').reverse().join('') }, set(value){ this.message = value.split('').reverse().join('') } } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ reversedMessage }}</p> <p>{{ reversedMessage1() }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'hello' }, methods: { reversedMessage1: function(){ return this.message.split('').reverse().join('') } }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }); </script> </body> </html>
注意:虽然通过计算属性和方法,都可以达到同样的效果,但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
通过Vue实例的watch属性可以侦听数据的变化。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button @click="reverse=!reverse">反转</button> </div> <script> new Vue({ el: '#app', data: { message: 'Vue', reverse: false }, watch: { // message: function(newVal, oldVal){ reverse: function(newVal){ console.log(newVal) this.message = this.message.split('').reverse().join('') } }, }); </script> </body> </html>
我们可以通过实例属性vm.$watch达到同样的效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button @click="reverse=!reverse">反转</button> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Vue', reverse: false } }); // vm.$watch('reverse', function (newVal, oldVal) { vm.$watch('reverse', function (newVal) { console.log(newVal) this.message = this.message.split('').reverse().join('') }); </script> </body> </html>
以上就是vue 计算属性和侦听器的使用小结的详细内容,更多关于vue 计算属性和侦听器的资料请关注站长技术其它相关文章!
接口与实现 1 接口 2 实现接口 3 接口回调 4 理解接口 5 接口与多态 6 接口变量...
在采用 log4j 的kafka-appender收集 spark 任务运行日志时,发现提交到 yarn 上...
1上期对于Activity的生命周期的理解不是很到位这次再来展示下Activity在横竖屏切...
Fiddler是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流动...
漏洞存在地址: burp抓包 POST /phpcms_v9.6.0_UTF8/install_package/index.phpm...
在众多可用于简化 Node.js 开发的工具中,以下 9 种是最佳选择。 我最近在 Stack...
在移动开发中,下拉弹框是一种很常见的选择交互方式,效果如下图所示。 对于这种...
复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会...
介绍 正则表达式一般用于字符串匹配, 字符串查找和字符串替换. 别小看它的作用, ...
1.example.xml--主要数据文件 ?xmlversion="1.0"encoding="UTF-8"? ?xml:stylesh...