用computed和模版判断

来源：4-6 ColumnList 组件使用 Bootstrap 美化

qq_她眼里有一片海_03181916

2020-09-28

1.通过计算属性给没有图片地址的数据添加默认图片地址
2.在模版中通过判断是否有图片地址来赋值默认地址如：

这两种方式哪种性能更好些呢？我平常都用第二种，看到老师用计算属性实现的想请教下

写回答

3回答

张轩

2020-09-30

同学你好楼下同学说的挺好直接赋值肯定没问题但是它处理复杂逻辑的能力有限，而且我比较喜欢计算属性逻辑更加清晰，所以这个问题没有标准答案，完全看具体的业务逻辑

RamirezNi

2020-09-30

  <ul class="row column-list-container">
    <li class="col-4 mb-4" v-for="column in list" :key="column.id">
      <div class="card h-100 shadow-sm">
        <div class="card-body text-center">
          <img
            :src="column.avatar || defaultAvatar"
            class="rounded-circle border border-light w-25 my-3"
            :alt="column.title"
          />
          <h5 class="card-title">{{ column.title }}</h5>
          <p class="card-text text-left">{{ column.description }}</p>
          <a href="#" class="btn btn-outline-primary">进入专栏</a>
        </div>
      </div>
    </li>
  </ul>

感觉简单逻辑直接扔模板里吧，计算数属性也有开销，当然以后可能有更多对数据的操作，计算属性就有优势了