Vue的计算属性和样式绑定

一、计算属性

1.1 概述及作用

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

• 关键词：computed
• 作用：计算属性用于处理一些复杂逻辑。

1.2 为何需要用到计算属性？

案例

	<div id="app">
        {
   {
    msg.split('').reverse().join('') }}//字符串翻转
    </div>

    <script>
        let vm = new Vue({
   
            el: "#app",
            data: {
   
                msg: "apple!"
            }
        })
    </script>

可以看出模板变的很复杂，也不容易看懂理解。那如何解决呢？
下面使用computed会使代码更加清晰。
代码如下

	<div id="app">
        <p>原始字符串：{
   {
    msg }}</p>
        <p>反转后的字符串：{
   {
   reverseMsg}}</p>
    </div>

    <script>
        let vm = new Vue({
   
            el: "#app",
            data: {
   
                msg: "apple!"//被翻转的字符串
            },
            computed: {
   
            	// 计算属性的 getter
                reverseMsg: function() {
   
                    return this.msg.split('').reverse().join('');//字符串翻转
                }
            }         
        })
    </script>

运行结果：

案例中声明了一个计算属性reverseMsg。
提供的函数将用作属性 vm.reverseMsg 的 getter 。
vm.reverseMsg依赖于 vm.msg，在 vm.msg 发生改变时，vm.reverseMsg 也会更新。

1.3 computed与methods的区别

案例

<div id="app">
        <p>原始字符串：{
   {
    msg }}</p>
        <p>反转后的字符串：{
   {
   reverseMsg2()