十分钟速通 Vue 动态 Class、Style

计算属性

大家有没有思考过这样一个问题，下面这段代码，功能上没什么问题，但是读起来很费劲，因为需要思考过后，才能知道这段代码的意思。

<p>{{ message.split('').reverse().join('') }}</p>

这完全不符合面向对象的思想（关注功能，不关注过程），如果改成下面这种写法，是不是更清晰呢？

<p>{{ reverseMessage }}</p>

这就是这一节要学习的计算属性.

计算属性

计算属性是继data、methods、watch之后的又一个新成员

书写位置

跟其他属性一样，计算属性也是通过键值对的方式添加，并且没有先后顺序：

<script>
  export default {
    name: 'app',
    // 计算属性
    computed: {},
  };
</script>

计算属性的写法

计算属性内部是由一系列方法组成的键值对，键是方法名，值是方法体，以文章开头的代码为例，计算属性可以这样写：

<script>
  export default {
      name: "app",
      data:function(){
          return {
              message:"message"
          }
      }
      // 计算属性
      computed:{
          reverseMessage:function(){
              return this.message.split('').reverse().join('')
          }
      }
  };
</script>

计算属性和方法的区别

其实上面的案例，使用methods也可以实现，实现方式如下：

<div id="app">
  <p>原字符串：{{ message }}</p>
  <p>反转后的字符串：{{ reverseMessage() }}</p>
</div>
<script>
  export default {
    name: 'app',
    data: function () {
      return {
        message: '优课达--学的比别人好一点～',
      };
    },
    methods: {
      reverseMessage: function () {
        return this.message.split('').reverse().join('');
      },
    },
  };
</script>

看起来没什么区别，无非是将reverseMessage改成了reverseMessage(),将方法的位置改到了methods中，但是为什么要去选择计算属性呢？

这是因为计算属性的两个性质：依赖和缓存。

**依赖：**案例中message就是计算属性的依赖 **缓存：**上一次计算得到的值

结合上面的案例解释一下：

计算属性：

• 当 message 发生改变（即依赖变化），reverseMessage 计算属性会重新计算，然后返回计算结果；
• message 不发生改变（即依赖不变化），reverseMessage 计算属性会返回缓存的值，而不会重新计算。

方法：

• 每次访问的时候，都会去执行方法体里的逻辑，然后返回结果。

总结：计算属性避免了不必要的代码执行，性能更优

动态 class

动态样式绑定就是根据条件去给某个标签添加样式，其实在学习JavaScript的时候，就遇到过这种情况

let currentIndex = 0;
function clickFn(index) {
  if (currentIndex === index) {
    element.style.backgroundColor = 'green';
  }
}

动态样式绑定

在 Vue 中提供了更方便的方案来实现，就是动态样式绑定。

动态样式绑定的语法如下：

<div class="base" v-bind:class="{ active: isActive }"></div>
.active {
  border: 1px solid green;
}

• active是类名，对应CSS样式中的类名；
• isActive是boolean类型的值，决定是否应用该类名。

1. 类名的书写

如果是单个单词的类名，如active，就跟上面的写法一样，如果是带连字符的类名base-active，就需要用引号(双引号""|单引号’')引起来：

<div v-bind:class="{ 'base-active': isActive }"></div>

2. 引号规则

如果大括号用双引号引起来("{}")那么里面的类名就要用单引号引起来('base-active')，反之相反

<!-- 外双内单 -->
<div v-bind:class="{ 'base-active': isActive }"></div>
<!-- 外单内双 -->
<div v-bind:class='{ "base-active": isActive }'></div>

3. 多类名写法

动态样式绑定还可以绑定多个类，写法很简单，往对象({})里面填内容就完事儿了：

<div v-bind:class='{ "base-active": isActive,"base":true}'></div>

入门案例

学到这里，就可以使用之前学习的知识结合动态样式绑定的知识写一个简单的案例了，案例效果如下：

动态样式绑定的条件类型

现在我们来说一下，动态样式绑定的条件，也就是类名后面的boolean值，如何去获取这个布尔值，是接下来要掌握的内容。

1. 变量形式

比如说入门案例，就使用的是变量形式来获取布尔值的

<div :class="{ hover: isActive }">手机/运营商/数码</div>

在data中定义布尔类型的变量

data:function(){
    return {
        isActive:false
    }
}

最后通过用户事件来改变布尔值，从而改变动态绑定的样式

2. 方法形式

方法形式在循环渲染中用的比较多，这里可以用一个案例来说明一下：

图中的“新”字就是用过方法形式来渲染的，来看一下数据：

data:function(){
    return {
        liListData: [
            {
            imgUrl:
                'https://m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png',
            text: '话费',
            type: 'NEW',
            },
        ]
    }
}

数据中type字段决定是否显示“新”这个字样。但是它并不是布尔值，所以需要用一个方法来转换一下，这时候就用到了方法形式，核心代码如下：

<span :class="{ 'new-appear': isActive(item.type) }">新</span>

定义方法：

isActive: function(type) {
    if (type === 'NEW') {
        return true;
    }
    return false;
}

3. 表达式形式

其实在上面这个例子中，是没有必要使用方法的，因为逻辑过于简单，完全可以在 HTML 标签上使用表达式来解决

<span :class="{ 'new-appear': item.type === 'NEW' }">新</span>

这样一来是不是节省了很多代码呢？没错，随着学习的深入，解决问题的方法越来越多，选择最好的方法就显得尤为重要。

建议大家在刚才的代码中做一些修改，看看是否有效。

4. 计算属性形式

上面这个案例的效果，使用计算属性是做不到的，但是可以改造一下“入门案例”。

将样式对象以及判断条件都放在计算属性内：

computed: {
  hoverObj: function () {
    return {
      hover: this.index === 1,
    };
  },
},

动态样式绑定的写法

动态样式绑定有两种写法：

1. 对象写法
2. 数组写法

1. 对象写法

前面我们用的都是对象写法，它可以写单个属性

<div v-bind:class="{ active: isActive }"></div>

也可以写多个属性

<div v-bind:class="{ active: isActive ,hover:true,'after-hover':false}"></div>

2. 数组写法

对象的写法遵从键值对的规则，数组的写法当然也要遵从数组的规则，往里面添加类名即可

常规写法

注意这里的类名都要带引号

<div v-bind:class="['red-style', 'font-style']"></div>

数组中使用三元表达式

有时候某个样式类可能会根据条件决定要不要应用，所以需要三元表达式去帮助实现：

<div v-bind:class="['red-style', 'font-style',isChoosed ? 'redbg' : '']"></div>

你也可以使用三元表达式实现两个类名的二选一

<div
  v-bind:class="['red-style', 'font-style',isChoosed ? 'redbg' : 'bluebg']"
></div>

在数组中使用对象

上面的第一个写法，其实是有点多余的，既然isChoosed为false的时候，没有类名被应用到标签上，那么完全没必要去写呀。

所以结合对象的写法，可以将三元表达式改写成数组中使用对象的写法

<div v-bind:class="['red-style', 'font-style',{'redbg':isChoosed}]"></div>

而第二种是不能改成对象的形式的。仅限于第二个结果为''的情况

动态样式绑定的知识就这么多了，大家可以尝试一下把案例修改成数组写法的形式去熟悉一下数组的写法。