• 售前

  • 售后

热门帖子
入门百科

vue 盘算属性和侦听器的利用小结

[复制链接]
m12345666 显示全部楼层 发表于 2021-10-25 20:27:25 |阅读模式 打印 上一主题 下一主题
1. 计算属性和侦听器


1.1 计算属性
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">   
  5.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.                         <p>{{ message }}</p>
  10.                         <p>{{ reversedMessage }}</p>
  11.     </div>
  12.     <script>
  13.       new Vue({
  14.         el: '#app',
  15.         data: {
  16.                                         message: 'hello'
  17.         },
  18.                                 computed: {                                       
  19.                                         reversedMessage: function () {
  20.                                                 return this.message.split('').reverse().join('')
  21.                                         }
  22.                                         /*
  23.                                         // 相当于
  24.                                         reversedMessage: {
  25.                                                 get(){
  26.                                                         return this.message.split('').reverse().join('')
  27.                                                 }
  28.                                         }
  29.                                         */
  30.                                 }
  31.       });
  32.     </script>
  33.   </body>
  34. </html>
复制代码

表明:我们在属性computed中界说了计算属性reversedMessage,这里提供的函数将作为计算属性reversedMessage的getter函数。
1.2 setter


计算属性默认只有getter,不外我们可以提供一个setter。
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">   
  5.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.                         <p>{{ message }}</p>
  10.                         <p>{{ reversedMessage }}</p>
  11.                         <input type="text" v-model="reversedMessage" />
  12.     </div>
  13.     <script>
  14.       new Vue({
  15.         el: '#app',
  16.         data: {
  17.                                         message: 'hello'
  18.         },
  19.                                 computed: {
  20.                                         reversedMessage: {
  21.                                                 get(){
  22.                                                         return this.message.split('').reverse().join('')
  23.                                                 },
  24.                                                 set(value){
  25.                                                         this.message = value.split('').reverse().join('')
  26.                                                 }
  27.                                         }
  28.                                 }
  29.       });
  30.     </script>
  31.   </body>
  32. </html>
复制代码
1.3 缓存
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">   
  5.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.                         <p>{{ message }}</p>
  10.                         <p>{{ reversedMessage }}</p>
  11.                         <p>{{ reversedMessage1() }}</p>
  12.     </div>
  13.     <script>
  14.       new Vue({
  15.         el: '#app',
  16.         data: {
  17.                                         message: 'hello'
  18.         },
  19.                                 methods: {
  20.                                         reversedMessage1: function(){
  21.                                                 return this.message.split('').reverse().join('')
  22.                                         }
  23.                                 },
  24.                                 computed: {                                       
  25.                                         reversedMessage: function () {
  26.                                                 return this.message.split('').reverse().join('')
  27.                                         }
  28.                                 }
  29.       });
  30.     </script>
  31.   </body>
  32. </html>
复制代码

注意:固然通过计算属性和方法,都可以到达同样的效果,但是计算属性是基于它们的响应式依赖进行缓存的。只在相干响应式依赖发生改变时它们才会重新求值。
1.4 侦听属性


通过Vue实例的watch属性可以侦听数据的厘革。
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">   
  5.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.                         <p>{{ message }}</p>
  10.                         <button @click="reverse=!reverse">反转</button>
  11.     </div>
  12.     <script>
  13.       new Vue({
  14.         el: '#app',
  15.         data: {
  16.                                         message: 'Vue',
  17.                                         reverse: false
  18.         },
  19.                                 watch: {
  20.                                         // message: function(newVal, oldVal){
  21.                                         reverse: function(newVal){
  22.                                                 console.log(newVal)
  23.                                                 this.message = this.message.split('').reverse().join('')
  24.                                         }
  25.                                 },
  26.       });
  27.     </script>
  28.   </body>
  29. </html>
复制代码
我们可以通过实例属性vm.$watch到达同样的效果。
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">   
  5.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.                         <p>{{ message }}</p>
  10.                         <button @click="reverse=!reverse">反转</button>
  11.     </div>
  12.     <script>
  13.       var vm = new Vue({
  14.         el: '#app',
  15.         data: {
  16.                                         message: 'Vue',
  17.                                         reverse: false
  18.         }
  19.       });
  20.                        
  21.                         // vm.$watch('reverse', function (newVal, oldVal) {
  22.                         vm.$watch('reverse', function (newVal) {
  23.                                 console.log(newVal)
  24.                                 this.message = this.message.split('').reverse().join('')
  25.                         });
  26.     </script>
  27.   </body>
  28. </html>
复制代码
以上就是vue 计算属性和侦听器的使用小结的具体内容,更多关于vue 计算属性和侦听器的资料请关注草根技能分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作