使用vue根据淘宝写一个商品评论页面代码

好的，下面是基于Vue的淘宝商品评论页面代码：

<template>
  <div class="comment">
    <div class="filter">
      <span class="label">评价类型:</span>
      <el-radio-group v-model="filterType">
        <el-radio-button label="all">全部评价</el-radio-button>
        <el-radio-button label="good">好评</el-radio-button>
        <el-radio-button label="normal">中评</el-radio-button>
        <el-radio-button label="bad">差评</el-radio-button>
      </el-radio-group>
    </div>
    <div class="list">
      <div class="item" v-for="comment in filteredComments" :key="comment.id">
        <img :src="comment.avatar" class="avatar" alt="avatar">
        <div class="content">
          <div class="header">
            <span class="username">{{ comment.username }}</span>
            <span class="time">{{ comment.time }}</span>
          </div>
          <p class="text">{{ comment.text }}</p>
          <div class="images">
            <img v-for="image in comment.images" :src="image" alt="comment image">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          username: '小明',
          avatar: 'https://dummyimage.com/80x80/000/fff',
          time: '2020-01-01',
          text: '非常好用，质量也很好',
          images: ['https://dummyimage.com/200x200/000/fff', 'https://dummyimage.com/200x200/000/fff']
        },
        {
          id: 2,
          username: '小红',
          avatar: 'https://dummyimage.com/80x80/000/fff',
          time: '2020-01-02',
          text: '还可以，不是很满意',
          images: []
        },
        {
          id: 3,
          username: '小李',
          avatar: 'https://dummyimage.com/80x80/000/fff',
          time: '2020-01-03',
          text: '质量不错，但是价格稍微有点贵',
          images: ['https://dummyimage.com/200x200/000/fff']
        }
      ],
      filterType: 'all'
    }
  },
  computed: {
    filteredComments() {
      if (this.filterType === 'all') {
        return this.comments
      } else {
        return this.comments.filter(comment => comment.type === this.filterType)
      }
    }
  }
}
</script>

<style>
.comment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

.label {
  margin-right: 10px;
}

.list {
  width: 600px;
}

.item {
  display: flex;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.content {
  flex: 1;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.username {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.time {
  color: #666;
}

.text {
  margin-bottom: 10px;
}

.images {
  display: flex;
  flex-wrap: wrap;
}

.images img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

这个页面包含了筛选评价类型、评价列表展示、用户头像、评价内容、评价图片等功能，可以根据实际需求进行修改和扩展。