08.计算属性

最新推荐文章于 2024-08-29 14:26:44 发布

M丶GentleMan

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量54

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ma628991/article/details/121390724

版权

Vue学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

01.姓名案例-插值语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-插值语法</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 双向数据绑定使用v-model,可省略value -->
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        <!-- 直接这么写的话，在变化姓名的时候，代码不美观，比如我们想保留三位，翻转名字，大写等等。所以，
            下一节使用methods优化 -->
        姓名：<span>{{firstName}}-{{lastName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                firstName: 'Vue',
                lastName: '学习'
            }
        })
    </script>
</body>

</html>

02.姓名案例-methods语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-methods值语法</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 双向数据绑定使用v-model,可省略value -->
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>

        <!-- 因为是调用函数，所以需要加（） -->
        <!-- 每次执行的时候，代码都会看一下函数是否发生了改变，保证里面的内容是最新的。 -->
        姓名：<span>{{fullName()}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                firstName: 'Vue',
                lastName: '学习'
            },
            methods: {
                fullName() {
                    // 此时的this指向的是vm
                    // console.log(this);
                    // 为了代码的美观，我们对姓名的格式修改可以在此完成。
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>
</body>

</html>

03.姓名案例-计算属性语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-methods值语法</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 双向数据绑定使用v-model,可省略value -->
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>

        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: 'Vue',
                lastName: '学习'
            },
            computed: {
                // 完整写法
                // fullName: {
                //     // get什么作用？
                //     // 答：当有人读取get的时候，且返回值是fullName的值。
                //     // get什么时候被调用？
                //     // 答：1.初次被调用
                //     //     2.所依赖的参数数据发生变化时。
                //     // 上面两点是与众不同之处，别的方法在多次调用的时候，系统会有缓存，在次调用会直接拿缓存的数据，而computed在发生变化的时候也会调用。
                //     // 优势:与methods相比,内部有缓存机智(复用),效率更高,调试方便
                //     get() {
                //         // 同样,不能写箭头函数
                //         return this.firstName + '-' + this.lastName
                //     },
                //     // 在你确定name不会发生改变的时候，可不写set
                //     set() {
                //         // 因为姓 名中间有个-，所有我们要提取。
                //         const arr = value.split('-')
                //         // 我们利用set修改之后，让名字和修改的内容相等。
                //         //  firstName 和 lastName = value的值,会到前台显示,而fullname捕捉到了name发生变化,因此名字组合也会跟着变化
                //         firstName = value[0]
                //         lastName = value[1]
                //     }
                // }

                // 简写（当我们确定只读取不修改才能简写）
                // fullName: function () {
                //     return this.firstName + '-' + this.lastName
                // }

                // 再次简写
                fullName() {
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>
</body>

</html>