vue2【计算属性】

属性】"/>

vue2【计算属性】

目录

1：计算属性的作用

2：代码示例

3：特点

4：好处

1：计算属性的作用

计算属性指的是通过将属性经过运算，最终得到一个属性值，这个属性值可以在method节点下和模板结构中被使用。

2：代码示例

需求：将内容属性超过长度50的部分做...处理

  computed:{//测试计算属性testComputed(){//判断数据区域内的属性内容是否大于五十if (this.article.content.length > 50) {return this.article.content.slice(0, 50) + '...';} else {return this.article.content;}}}

模板展示：

<template><div class="article-detail-page" v-if="article.id"><nav class="nav"> <span @click="$router.back()" class="back">&lt;</span> 面经详情</nav><header class="header"><h1>{{ article.stem }}</h1><p>{{ article.createdAt }} | {{ article.views }} 浏览量 | {{ article.likeCount }} 点赞数</p><p><img :src="article.creatorAvatar" alt=""><span>{{ article.creatorName }}</span></p></header><main class="body">{{ article.content }}<!--      计算属性处理文本内容--><!--      {{ testComputed }}--></main></div>
</template>

3：特点

1：定义的时候，要被定义为"方法"

2：在使用计算属性的时候，当成普通的属性调用即可

4：好处

1：可以实现代码的复用

2：当计算属性中所依赖的数据源属性发生变化时，计算属性就会通过一定的规则进行重新计算。