vue计算属性

1.1.1计算属性作用

• 模板中放入太多的逻辑会让模板过重且难以维护  使用计算属性可以让模板更加的简洁

• 计算属性是基于它们的响应式依赖进行缓存的

• computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说 多个变量中的某一个值 发生了变化 则 我们监控的这个值也就会发生变化。

computed 是一个对象，这个对象里 可以写 很多 方法。

vue计算(计算属性)vue中computed的作用：从"已经有的数据"计算 出新的数据 (渲染到 视图层去使用！)。

(1)计算属性 在computed对象中写

  computed:{
        //自定义 若干个属性
    }

 (2)自定义一个计算属性,把计算属性的具体作用，写在function函数中,function中处理的数据，一定是data数据中心中已经有的数据，    对已有的数据，进行处理，处理得到的新值，然后渲染显示到视图层中。

   computed:{
       //自定义 若干个属性
       属性名1:function(){}

}

1.1.2基本用法

使用计算属性，实现字符串的翻转

<div id="app">
        <h1>原字符串：{{msg}}</h1>
        <h1>反转之后的字符串：{{reverseMsg}}</h1>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   msg:'hello vuejs'
                }

            },
            computed:{
                //自定义一个 计算属性名
                //计算属性 依赖的是数据中心的数据
                reverseMsg(){
                    console.log(this.msg.split(''));
                    return this.msg.split('').reverse().join('')

                }
            },
            methods:{
               

            }
        })
    </script>

预览：

1.1.3和方法有什么区别

• 两者的执行结果是完全相同的

• 计算属性 是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数

• 每次触发重新渲染时，调用方法将总会再次执行函数

 <div id="app">
        <h1>输入0-100之间数的和</h1>
        <h1>{{Total}}</h1>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                  num:100
                }

            },
            computed:{
                //自定义一个 计算属性名
                //计算属性 依赖的是数据中心的数据
                //监听数据中心num这个值的变化
                Total(){
                   var total=null;
                   for(var i=0;i<=this.num;i++){
                        total+=i
                   }
                   console.log(total);
                 
                // 这里一定要有return 否则 调用 Total 的 时候无法拿到结果 
                   return total

                }
            },
            methods:{
               

            }
        })
    </script>

预览：

课后思考： 

自定义一个计算属性， 实现 功能 ：字符串 tom  变成  首字母 大写的 Tom

<div id="app">
        <h1>原字符串：{{uname}}</h1>
        <hr>
        <h1>字符串首字母转大写：{{upper}}</h1>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   uname:'hxxh'
                }

            },
            computed:{
                //自定义一个 计算属性名
                //计算属性 依赖的是数据中心的数据
                upper(){
                console.log(this.uname.charAt(0).toUpperCase());
                console.log(this.uname.substr(1))
                return this.uname.charAt(0).toUpperCase()+this.uname.substr(1)
                }
            
            },
            methods:{
               

            }
        })
    </script>

预览：