computed计算属性案例！

最新推荐文章于 2024-07-20 18:16:53 发布

Crystal_qwq

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量379

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_64498202/article/details/135486728

版权

本文介绍了如何在Vue应用中实现名字的动态拼接，包括使用`v-model`数据绑定和`computed`计算属性的简写与完整写法，以及`get`和`set`方法的运用。

摘要由CSDN通过智能技术生成

实现名字的拼接，修改名字功能按钮！

实现效果：

基本框架：

<div id="app">
        姓:<input type="text" v-model="firstName">+
        名：<input type="text" v-model="lastName">=
        <span>{{ fullName }}</span><br>
        <button @click="changName">改名卡</button>
    </div>

主要功能实现：

简写+完整写法

<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        methods: {
            changName(){
                this.fullName = '小乔'
            }
        },
        computed: {
            // //简写->获取,没有配置设置的逻辑
            // fullName(){
            //     return this.firstName + this.lastName
            // }

            //完整写法->获取 + 设置
            fullName: {
                //(1)当fullName计算属性，被获取求值时，执行get(有缓存，优先读缓存)
                // return:会将返回值作为求值的结果
                get(){
                    return this.firstName + this.lastName
                },
                //(2)当fullName计算属性，被修改赋值时，执行set
                // 修改的值，传递给set方法的形参
                set(value) {
                    // console.log(value.slice(0,1))//截取第一个字符
                    // value.slice(1)//截屏后面字符
                    this.firstName = value.slice(0,1)
                    this.lastName = value.slice(1)
                }

            }
        }
    })
</script>