提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue学习之--------计算属性（2022/7/9）

Vue属性计算学习 2022 --------
2023-09-14 09:07:25 时间

文章目录

1、计算属性

1.1 计算属性实现

提示：注意观察使用method方法实现和计算属性实现的差距

1.1.1 基础知识

计算属性：

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

1.1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        姓：<input type="text" v-model="firstName" /> <br /><br />
        名：<input type="text" v-model="lastName" /> <br /><br />
        全名：<span>{{fullName}}</span>
        全名：<span>{{fullName}}</span> <br /><br />
        全名：<span>{{fullName}}</span> <br /><br />
        全名：<span>{{fullName}}</span>


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                firstName: "李",
                lastName: "四",
            },
            methods: {},
            computed: {
                fullName: {
                    get() {
                        console.log('get被调用了')
                        console.log(this)
                        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>

1.1.3 测试效果

在这里插入图片描述
在这里插入图片描述

1.2 计算属性简写

1.2.1 简写代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        姓：<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  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                firstName: "李",
                lastName: "四",
            },
            methods: {},
            computed: {
                //完整写法
                /* fullName: {
                   
                 get() {
                       console.log('get被调用了')
                       console.log(this)
                       return this.firstName + '-' + this.lastName
                   },
                   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>

1.3 使用插值语法实现

1.3.1 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        姓：<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  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                firstName: "李",
                lastName: "四",
            }
        })
    </script>

</body>

</html>

1.3.2 实现效果

在这里插入图片描述

1.4 使用methods实现

1.4.1 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        姓：<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  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                firstName: "李",
                lastName: "四",
            },
            methods:{
                fullName(){
                    console.log(this)
                    return this.firstName + '-' + this.lastName
                }

            }
        })
    </script>

</body>

</html>

1.4.2 实现效果

在这里插入图片描述
在这里插入图片描述

相关文章