<template>
  <view class="abouttext-border">
    <view class="abouttext-content" v-for="(item, index) in abouttextcontent" :key="index">
      <view class="about-title">
        <text class="title">{{ item.title }}</text>
        <view>
          <button :class="{ 'active': item.isActive }" @click="toggleActive(index)">
            <text>{{ item.number }}</text>
            <image src="../../static/images/953d61504aee7f390488f188d6f1d1bb.png" mode=""></image>
          </button>
        </view>
      </view>
      <view class="about-content">
        <view class="content">
          {{ item.text }}
        </view>
      </view>
      <view class="about-bottom">
        <view class="date">
          {{ item.date }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      abouttextcontent: [
        {
          title: "人工智能的未来在哪里?——从智能家居到自动驾驶的前景展望",
          date: "06-08",
          number: "1.2w",
          text: "本文回顾了自动驾驶技术的历史、现状和未来展望。分析了自动驾驶技术的特点、应用场景、技术方案和未来发展方向。并提出设计一个自动驾驶模型的想法,介绍了方案的具体细节、技术实现和实验结果。最后,对自动驾驶技术的未来和应用前景进行了展望。",
          isActive: false
        },
        {
          title: "一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署自动驾驶技术的未来和应用前景进行了展望。",
          date: "06-09",
          number: "1.3w",
          text: "日常开发项目上线或者部署个人博客网站,都离不开线上服务器部署应用。本文带你学会线上部署应用。以腾讯云轻量应用服务器部署SpringBoot、Vue项目为例。",
          isActive: false
        },
        {
          title: "【Docker晋升记】No.1--- Docker工具核心组件构成(镜像、容器、仓库)及性能属性",
          date: "06-10",
          number: "1.4w",
          text: "这些工具组成了Docker生态系统,使得开发者可以更轻松地构建、交付和管理应用程序及其依赖项,实现了应用程序的可移樯性和可复制性。",
          isActive: false
        }
      ]
    };
  },
  methods: {
    toggleActive(index) {
      this.abouttextcontent.forEach((item, i) => {
        item.isActive = i === index ? !item.isActive : false;
      });
    }
  }
};
</script>
<style>
.active {
  background-color: red;
}
</style>
人工智能,自动驾驶,SpringBoot,Vue,Docker - 技术文章精选

原文地址: https://www.cveoy.top/t/topic/qc3F 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录