计算属性

最新推荐文章于 2025-01-05 18:15:38 发布

gunsmoke

最新推荐文章于 2025-01-05 18:15:38 发布

阅读量122

点赞数

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/106160509

版权

vue学习专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="main">
        <!--下面把逻辑写在模板中看上去会不爽-->
        {{name.substring(0,1).toUpperCase() + name.substring(1)}}
        <!--写在method中-->
        {{getName()}}
        <!--计算属性的写法,注意这里不能带括号,否则会报错-->
        <!--注意页面中如果有多个getName2,那么计算属性的代码只会执行一次,计算属性有缓存的作用,效率更高-->
        {{getName2}}
    </div>

    <script>
        new Vue({
            el: '#main',
            data: {
                name: 'gunsmoke'
            },
            methods: {
                getName() {
                    return this.name.substring(0,1).toUpperCase() + this.name.substring(1)
                }
            },
            computed: {
                getName2() {
                    return this.name.substring(0,1).toUpperCase() + this.name.substring(1)
                }
            }
        })
    </script>

</body>
</html>