计算属性。。。

<!--计算属性

        可以在里面写一下计算逻辑的属性

    他不像普通函数那样直接返回结过，而是经过一系列计算之后在返回结果

    同时只要在它当中应用了data中的某个属性挡这个属性发生变化时，

    计算属性可以嗅探到这种变化并自动执行

   

    定义：要用的属性不存在，通过已有属性计算得来

    使用：在computed对象中定义计算属性，在页面中使用{{方法名}}来显示计算结果-->

    <script>

        new Vue({

            el:'',

            // 数据

            data:{},

            // 方法属性

            // 事件绑定，不用return，没有缓存

            methods:{},

            // 侦听器（重视过程）

            // 监听一个值的改变，不用返回值。

            watch:{

                要侦听的数据(){}

            },

            // 计算属性（重视结果）

            // 必须有return，之求结果，有缓存

            computed:{

                计算属性名(){

                    // 经过一系列计算

                    return 处理操作后结果

                }

            }

        })

    </script>

    <!--

        计算属性的缓存特性

        第一次调用计算属性时，会产生一个结果，这个结果会缓存起来，后面每次用这个属性都是从缓存里取

        当它的依赖项发生改变，会重新计算得到一个结果，在缓存起来

     -->

基本使用

  <div id="app">

        <p>原始字符串：{{message}}</p>

        <p>计算反转后的字符串：{{reverseMessage}}</p>

        <p>变小写：{{toLowerCase}}</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                message:'ZXJSDBZZMS'

            },

            computed:{

                // 计算反转后的字符串

                reverseMessage:function(){

                    // split()把一个字符串分割成字符串数组

                    // reverse（）颠倒数组中元素的顺序

                    // join（）把数组中的所有元素转换为一个字符串

                    return this.message.split('')//.reverse().join('')

                },

                toLowerCase(){

                    return this.message.substring(0,1).toLowerCase+message.substring;

                }

            },

        })

    </script>

完整结构

<!--

        每一个计算属性都包含一个getter函数与setter函数

        计算属性会默认使用getter函数,setter函数并不常见，所以一般计算属性getter和setter都不写

        getter函数是默认用法，setter函数不是，如果要用setter函数，必须手动写出setter

        setter函数内的形参是你要修改的值

     -->

     <div id="app">

        姓：<input type="text" v-model="lastName"><br>

        名：<input type="text" v-model="firstName"><br>

        {{arr}}

        外号：<span>{{fullName}}</span>

        <button @click="btn">修改计算属性的值</button>

     </div>

     <script>

        new Vue ({

            el:'#app',

            data(){

               return {

                lastName:'王',

                firstName:'德法'

                       }

            },

            computed:{

                fullName:{

                    // get：获取值时触发

                    // 当有人读取full Name，get就会被调用，且返回值就作为fullName的值

                    get(){

                        return this.lastName+'-'+this.firstName;

                    },

                    // set：设置值时触发

                    // 当计算属性被修改时，调用set

                    set(value){

                        console.log('set',改变了);

                        // const arr = value.split('-')

                        // this.firstName = arr[0]

                        // this.lastName = arr[1]

                    }

                }

            },

            methods:{

                btn(){

                    this.fullName = '张-祥俊';

                }

            }

        })

     </script>