Vue.js学习第三天——动态绑定style及计算属性

本文链接：https://blog.csdn.net/qq_43709292/article/details/104226979

Vue.js学习第三天——动态绑定style及计算属性

今天是元宵节，先祝大家元宵节快乐，也祝在前线的医务人员节日快乐，希望疫情早日过去，加油💪
继昨天学习的动态绑定class属性，今天是动态绑定style属性，同样的，也分为数组语法和对象语法，一般数组语法应用的不多，了解即可。

对象语法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <h2 v-bind:style="{fontSize:fontSize}">{{message}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                message: 'hello',
                fontSize: '100px'
            }
        })
    </script>
</body>

</html>

数组语法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <h1 :style='[baseStyle , baseStyles]'>{{message}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                message: 'hello',
                baseStyle: { background: 'red' },
                baseStyles: { fontSize: '20px' },
            }
        })
    </script>
</body>

</html>

今天还学了一个计算属性 computed ，作用呢看起来与methods方法差不多，实际上它们的差别还是有的，在computed中，存在着 set 和 get两个方法，但是我们一般都将他们简写了，但是还是要知道有这两样东西
computed 与 methods 的区别？
computed在使用中，系统会存在有缓存，当检测到数据没有发生改变时，computed会使用缓存中的数据，但是methods会重复调用其中的函数，所以在这方面来说，methods的性能要比低一些。
下面是一些基本的例子：
set和get函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <h1>{{message}} {{finalName}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                message: 'hello',
                startName: 'real',
                endName: 'cute'
            },
            computed: {
                finalName: {
                    set: function(){
                        console.log('---');
                    },
                    get:function () { 
                        return this.startName + ' ' + this.endName; 
                    }

                }
            }
        })
    </script>
</body>
</html>

基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <h1>总价格 {{totalPrice}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                books: [{id:'1000',name:'Linux编程原理',price:100},
                        {id:'1001',name:'php编程原理',price:110},
                        {id:'1002',name:'C编程原理',price:120},
                        {id:'1003',name:'Java编程原理',price:130}]
            },
            computed:{ //计算属性 函数名一般不加动词
                totalPrice:function(){
                    let price = 0;
                    for(let attr in this.books){
                        price += this.books[attr].price
                    }
                    return price; 
                }
            }
        }) 
    </script>
</body>
</html>