框架学习之VUE（六）完成频道列表这里将做一下频道列表的内容从开始慢慢做完很舒适

最新推荐文章于 2024-10-03 18:38:20 发布

前端付豪

最新推荐文章于 2024-10-03 18:38:20 发布

阅读量236

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_43815680/article/details/108971884

版权

这篇博客详细介绍了如何使用Vue.js创建频道列表组件。首先新建channel.vue文件，逐步修改实现列表展示，接着创建ChannelList.vue以处理多个数组数据。通过调整样式，实现了动态数据的展示。虽然目前功能接近完善，但还存在切换选中状态的问题，需要进一步探讨解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 完成频道列表组件？

怎么做出这一块的组件？
在这里插入图片描述

1-1
新建channel.vue
1-2
修改一下

<template>
  <div class="channel">
    <Item :isActive="isActive" @active="$emit('active')">
      <div class="inner">
        <span class="name">动漫</span>
        <span class="number">226</span>
      </div>
    </Item>
  </div>
</template>

<script>
import Item from "./item";
export default {
   
  props: {
   
    isActive: {
   
      type: Boolean, //约束该属性的类型是boolean
      //   required: true, //约束必须填写的属性
      default: false,
    },
  },
  components: {
   
    Item,
  },
};
</script>

<style scoped>
.channel {
   
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.inner {
   
  padding: 0 20px;
}
.name {
   
  font-size: 14px