8. 计算属性

最新推荐文章于 2023-06-09 15:50:14 发布

Sun Jiakai_凯

最新推荐文章于 2023-06-09 15:50:14 发布

阅读量135

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/s12345672/article/details/119761887

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

计算属性

1. 插值语法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>姓名案例-插值语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            姓: <input type="text" v-model="firstname"><br><br>
            名: <input type="text" v-model="lastname"><br><br>
            全名: <span>{{firstname}}-{{lastname}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: '#root',
                data:{
                    firstname: '张',
                    lastname: '三'
                }
            })
        </script>
    </body>
</html>

2. methods方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>姓名案例-methods</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    
        <!-- 准备好一个容器 -->
        <div id="root">
            姓: <input type="text" v-model="firstname"><br><br>
            名: <input type="text" v-model="lastname"><br><br>
            全名: <span>{{fullName()}}</span>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data:{
                    firstname: '张',
                    lastname: '三'
                },
                methods:{
                    fullName(){
                        return this.firstname + "-" + this.lastname
                    }
                }
            })
        </script>
    </body>
</html>

3. 计算属性

计算属性：
   1.定义：要用的属性不存在，要通过已有属性计算得来。
   2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
   3.get函数什么时候执行？
               (1).初次读取时会执行一次。
               (2).当依赖的数据发生改变时会被再次调用。
   4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
   5.备注：
           1.计算属性最终会出现在vm上，直接读取使用即可。
           2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>姓名案例-计算属性</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            计算属性：
                1.定义：要用的属性不存在，要通过已有属性计算得来。
                2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
                3.get函数什么时候执行？
                            (1).初次读取时会执行一次。
                            (2).当依赖的数据发生改变时会被再次调用。
                4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
                5.备注：
                        1.计算属性最终会出现在vm上，直接读取使用即可。
                        2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            姓: <input type="text" v-model="firstname"><br><br>
            名: <input type="text" v-model="lastname"><br><br>
            测试: <input type="text" v-model="x"> <br/><br/>
            全名: <span>{{fullName}}</span>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: '#root',
                data:{
                    firstname: '张',
                    lastname: '三',
                    x: '你好'
                },
                //computed: 计算属性
                computed:{
                    fullName:{
                        //get的作用: 当fullName被读取时，get就会被调用，且返回值就作为fullName的值
                        //get什么时候被调用: 1.初次读取fullName时   2.所依赖的数据发生变化时
                        get(){
                            console.log("get被调用呢")
                            //console.log(this)     //此处的this是vm
                            return this.firstname + '-' + this.lastname
                        },
                        //set什么时候调用? 当fullName被修改时
                        set(value){
                            console.log('set', value)
                            const arr = value.split("-")
                            this.firstname = arr[0]
                            this.lastname = arr[1]
                        }
                    }
                }
            })
        </script>
    </body>
</html>

4. 计算属性简写

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>姓名案例-计算属性</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <!-- 准备好一个容器 -->
        <div id="root">
            姓: <input type="text" v-model="firstname"><br><br>
            名: <input type="text" v-model="lastname"><br><br>
            全名: <span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: '#root',
                data:{
                    firstname: '张',
                    lastname: '三',
                },
                //computed: 计算属性
                computed:{
                    //完整写法：
                    // fullName:{
                    //     //get的作用: 当fullName被读取时，get就会被调用，且返回值就作为fullName的值
                    //     //get什么时候被调用: 1.初次读取fullName时   2.所依赖的数据发生变化时
                    //     get(){
                    //         console.log("get被调用呢")
                    //         //console.log(this)     //此处的this是vm
                    //         return this.firstname + '-' + this.lastname
                    //     },
                    //     //set什么时候调用? 当fullName被修改时
                    //     set(value){
                    //         console.log('set', value)
                    //         const arr = value.split("-")
                    //         this.firstname = arr[0]
                    //         this.lastname = arr[1]
                    //     }
                    // }
                    
                    //简写：
                    fullName(){
                        console.log('get被调用了')
                        return this.firstname + '-' + this.lastname
                    }
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8. 计算属性

计算属性1. 插值语法<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例-插值语法</title> <!-
复制链接

扫一扫