Vue基础③

计算属性

当我们使用诸如

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

以此语法写出的代码读起来十分费劲且也不符合面向对象的思想。所以我们选用

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

并通过计算属性来完成。

计算属性（computed）

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

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

如我们完成上面的效果，可以：

<script>
  export default {
      name: "app",
      data:function(){
          return {
              message:"优课达--学的比别人好一点～"
          }
      }
      // 计算属性
      computed:{
          reverseMessage:function(){
              return this.message.split('').reverse().join('')
          }
      }
  };
</script>

其实上面的方法使用methods也能完成：

<div id="app">
  <p>原字符串：{{ message }}</p>
  <p>反转后的字符串：{{ reverseMessage() }}</p>
</div>
 methods: {
      reverseMessage: function () {
        return this.message.split('').reverse().join('');
      },
    },

看起来没有什么区别，无非是 {{ }} 内略有不同罢了。

那么为什么要用计算属性呢？

因为计算属性有依赖和缓存两个性质

依赖：案例中 就是计算属性的依赖 缓存：上一次计算得到的值
结合上面的案例解释一下：


计算属性：

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

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


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

动态class

我们可以通过 v-bind 来动态绑定class，以此来完成动态样式如

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

.active {
  border: 1px solid green;
}
data:function(){
    return {
        isActive:false
    }
}

其中 active 表示类名，而 isActive 表示一个布尔类型的值以此来表示是否启用此类。

其中，类名书写也有规则，比如类名为 base-active 时，我们需要使用 单引号或者双引号来包裹如：

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

引号规则

如果大括号用双引号引起来，那边类名就要用单引号引起来，反之依然如：

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

动态样式绑定也可以绑定多个类名，只要逗号间隔就行

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

除了上面的绑定写法，样式绑定也支持三元表达式：

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

动态style

除了可以添加动态的外部样式，vue也支持添加动态行内样式

<div :style="flexStyle"></div>
data:function(){
    return {
        flexStyle: {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexWrap: 'no-wrap',
        },
    }
}

同时，可以通过添加变量来达成动态效果，但全局变量内不能引用全局变量。

和动态class一样，其也可以添加数组和三元表达式

如

data() {
  return {
    fontStyle: { color: 'red', fontSize: '33px' },
    boxStyle:{width: '200px', height: '200px', border: `1px solid black`}
  };
},

可以用数组表达

<div :style="[fontStyle,boxStyle]">这里是文字</div>

也可以使用三元表达式

<div :style="[fontStyle, isActive ? boxStyle : colorBox]">这里是文字</div>