1.7

最新推荐文章于 2024-10-07 09:24:46 发布

九今

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量377

点赞数

分类专栏：笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_51603531/article/details/122364353

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中动态绑定style的方法，包括使用驼峰式或短横线分割写CSS属性名，以及通过对象和数组方式绑定样式。同时，详细讲解了计算属性的使用，包括其缓存特性、getter和setter的定义，并通过示例展示了如何计算fullName。

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

02

v-bind动态绑定style
1.写CSS属性名时，可以用驼峰式（fontSize），或用短横线分割（要用单引号括起来）（‘font-size’）.
2.对象绑定

:style="{fontSize:fontsize+'px',color:Color}"

3.数组绑定

v-bind:style="[]"

计算属性
计算属性会进行缓存，如果多次使用，计算属性只会调用一次
计算属性的getter和setter
每一个计算属性都包含一个get和set，一般不写set，计算属性本质上是一个属性不是方法，所以用的时候不要加（）。

<body>
    <div id="app">{{fullName}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'koby',
                lastName: 'peter',
            },
            computed: {
                fullName: {
                    set: function () {
                    },
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    }
                     //可直接写成以下形式
                    // fullName:function(){
                    //     return this.firstName + ' ' + this.lastName;
                    // }
                },
            }
        })
    </script>
</body>