计算属性的结构用法

最新推荐文章于 2024-08-26 16:11:36 发布

`秋刀鱼`

最新推荐文章于 2024-08-26 16:11:36 发布

阅读量964

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/s8459/article/details/127332161

版权

计算属性：

本质：计算属性的本质就是一个方法，只不过，我们在使用的时候，把他们的名称直接当属性来用，而不是当方法来用。

计算属性的几个特点：

1、计算属性里可以完成各种复杂的逻辑，包括运算，函数调用等

2、返回一个结果，就是要有return 结果

3、使用的时候不需要带上（）

4、只要计算属性这个方法function 的内部，所用到的任何数据data 发生了变化就会立即重新计算这个属性的值（实时监听，实时计算）比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量的某一个值发生了变化，则我们监控的这个值也就发生了变化

5 、计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中的任何数据都没有发生变化，则不会重新对计算属性求值

6、计算属性用来监听自己定义的变量，该变量不在data中声明，直接在中定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

计算属性的基本结构：

<script>
        //计算属性：
        //可以在里面写一些计算逻辑的属性
        //他不像普通函数那样直接返回结果，而是经过一系列计算之后再返回结果
        //同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以嗅探到这种变化，并自动执行
        //定义：要用的属性不存在，通过已有属性计算得来
        //使用：在computed,对象中定义计算属性，在页面中使用{方法名}来显示计算的结果

        // 基本结构
        new  Vue({
            el:'',

            // 数据
            data:{},

            // 方法属性：事件绑定，不用return，没有缓存
            methods:{},

            // 侦听器：侦听一个值的改变，不用返回值
            watch:{
                要侦听的数据(){}

            },

            // 计算属性(重视结果)
            // 必须有return，只求结果，有缓存
            computed:{
                计算属性名(){
                     // 经过一系列计算
                    return 处理操作后结果
                }
            }
            // 计算属性的缓存特性
            // 第一次调用计算机属性时，会产生一个结果，这个结果会被缓存起来，后面每次用到这个属性都是从缓存里取
            // 当它的依赖项发生改变，会重新计算得到一个结果，再缓存起来
        })

计算属性的基本使用：

<body>
    <div id="app">
        <p>原始字符串：{{ message }}</p>
        <p>计算反转后的字符串：{{ reverseMessage }}</p>
        <p>将原字符串转为小写：{{ toLowerCase }}</p>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                message:'ABCDEFG'
            },
            computed:{
                // 计算反转后的字符串
                reverseMessage:function(){
                    // split()把一个字符串切割成字符串数组
                    // reverse()颠倒数组中元素的顺序
                    // join() 把数组中的所有元素转换为一个新的字符串
                    return this.message.split('').reverse().join('')
                },

                // 将原数组转换为小写
                toLowerCase(){
                    // substring(from,to)提取字符串中介于两个指定下标之间的字符 
                    //  toLowerCase()用于把字符串转换为小写
                    return this.message.substring(0,7).toLowerCase()
                }
               
            }

        })
                // 将原字符串第一个元素转换为小写
                var str = "SMALL String";
                str = str.replace(str[0],str[0].toLowerCase());
                console.log(str); 
// 颠倒再连接
    </script>
</body>

计算属性的完整结构：

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

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

3、getter函数是默认用法,setter函数不是默认用法。如果要使用setter函数,必须手动写出setter函数

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

<div id="app">
        性：<input type="text" v-model="lastName"> <br><br/>
        名：<input type="text" v-model="firstName"> <br><br/>
        全名：<span> {{ fullName }} </span>
        <button @click="btn"> 修改计算属性的值 </button> <br><br/>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data(){
                return {
                    lastName:'江户川',
                    firstName:'柯南'
                }
            },
            computed:{
                fullName:{
                    // get：获取值触发
                    // 当有人读取fullName时，且返回值就作为fullName的值
                    get(){
                        return this.lastName + '-' + this.firstName
                    },
                    // set：设置值时会触发
                    // 当计算属被修改时调用set
                    set(value){
                        console.log('set',value);
                    }
                }
            },
                methods:{
                    btn(){
                        this.fullName = '工藤新一';
                    }
            }
        })

    </script>