computed

作用：动态数据依赖(当前数据依赖另一个数据)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>侦听器watch</title>
  9. </head>
  11. <body>
  12.     <div id='app'>
  13.         {{reverseMsg}}
  14.         <h3>{{fullName}}</h3>
  15.         <button @click='handleClick'>改变</button>
  16.     </div>
  17.     <script src="./vue.js"></script>
  18.     <script>
  19.         new Vue({
  20.             el: '#app',
  21.             data: {
  22.                 msg: 'hello world',
  23.                 firstName: 'ecithy',
  24.                 lastName: '哥'
  25.             },
  26.             methods: {
  27.                 handleClick(){
  28.                     this.msg = '计算属性computed';
  29.                     this.lastName = '妹';
  30.                 }
  31.             },
  32.             computed: {
  33.                 // computed默认只有getter方法
  34.                 // 计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取
  35.                 reverseMsg: function () {
  36.                     return this.msg.split('').reverse().join('')
  37.                 },
  38.                 fullName: function () {
  39.                     return this.firstName + this.lastName;
  40.                 }
  41.             },
  43.         })
  44.     </script>
  45. </body>
  47. </html>

setter方法

输入的数据动态绑定给data

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>计算属性setter</title>
  9. </head>
  11. <body>
  12.     <div id='app'>
  13.         {{content}}
  14.         <input type="text" v-model='content' @input = 'handleInput'>
  15.         <button @click='handleClick'>获取</button>
  16.     </div>
  17.     <script src="./vue.js"></script>
  18.     <script>
  19.         new Vue({
  20.             el: '#app',
  21.             data: {
  22.                 msg: '',
  23.             },
  24.             methods: {
  25.                handleInput:function(event){
  26.                    const {value} = event.target;
  27.                    this.content = value;
  28.                },
  29.                handleClick(){
  30.                 //    console.log();
  31.                 if (this.content) {
  32.                     console.log(this.content);
  33.                 }
  35.                }
  36.             },
  37.             computed: {
  38.               content:{
  39.                   set:function(newV){
  40.                       this.msg = newV;
  41.                   },
  42.                   get:function(){
  43.                       return this.msg;
  44.                   }
  45.               }
  46.             },
  48.         })
  49.     </script>
  50. </body>
  52. </html>