<nav class=“nav nav-tabs justified-content-end my-1”>

这是一个 HTML 标签 nav 的示例，其中包含了多个 CSS 类。nav 表示导航栏，nav-tabs 是 Bootstrap CSS 类，表示用选项卡的形式展示导航栏。justified-content-end 是 Bootstrap CSS 中用于居右对齐导航选项的类。my-1 表示在顶部和底部添加了 0.25rem 的外边距，以增加导航栏的垂直间距。

相关问题

<template> <homeHeader :class='isclicked1' vuale="朋哟"></homeHeader> <homeHeader :class='isclicked2' vuale="哼哼"></homeHeader><!-- 实习兼职 --> <van-nav-bar> <template #right> <van-icon name="search" size="18" /> </template> </van-nav-bar> <!-- 搜索图标 --> <div> <!-- <router-view> <tabHome :tabCard="tabHome"></tabHome> </router-view> --> <!-- 综合、web --> <van-tabs v-model:active="active"> <van-tab title="综合"> <tab></tab> <SZ_Boss_home></SZ_Boss_home> </van-tab> <van-tab title="web"> <tab></tab> <SZ_Boss_home></SZ_Boss_home></van-tab> </van-tabs> </div> </template> <script> /* import tabHome from '../components/tab.vue' / import SZ_Boss_home from './SZ_Boss_home.vue' import homeHeader from '../components/homeHeader.vue' import tab from '../components/tab.vue' export default { components: { homeHeader, / tabHome */ SZ_Boss_home, tab }, data() { return { } }, methods: { } } </script> <style scoped> .top_nav { display: flex; position: absolute; top: 0; left: 0; z-index: 999; } .van-nav-bar { background-image: linear-gradient(to right, rgba(86, 238, 233, 0.24), rgba(230, 144, 168, 0.33)); color: rgb(255, 255, 255); border-bottom: 1px rgba(255, 255, 255, 0.45); } .van-tabs__nav .van-tabs__nav--line { top: 300px; height: 0; } .van-tab { float: right; background-color: rgb(80, 160, 171); } </style>该文件调用了<template> <div class="top_nav" > <input type="button" :class="{'my-button': true, 'active': isClicked1}" value="实习" @click="toggleButton1"> <input type="button" :class="{'my-button': true, 'active': isClicked2}" value="兼职" @click="toggleButton2"> </div> </template> <script> export default { name:'homeHeader', data() { return { isClicked1: true, isClicked2: false, } }, methods: { toggleButton1() { if (this.isClicked1) { return; } this.isClicked1 = true; this.isClicked2 = false; this.$emit('reset-buttons'); }, toggleButton2() { if (this.isClicked2) { return; } this.isClicked1 = false; this.isClicked2 = true; this.$emit('reset-buttons'); } }, props:['tit'] } </script> <style scoped> .my-button { border: none; border-radius: 4px; background-color: #f0f0f000; transition: all 0.2s ease-in-out; cursor: pointer; color: rgb(154, 154, 154); font-size: 16px; } .active { background-color: rgba(51, 51, 51, 0); color: rgb(0, 0, 0); font-size: 26px; } .top_nav input{ float: left; } </style>该子组件，但是为什么value得值不能改变

根据你提供的代码，我注意到 `<homeHeader>` 组件中的 input 标签的 value 属性是通过 props 传递进来的，而且在子组件中没有对它进行修改的方法，所以它的值不能改变。如果你想要修改这个值，可以考虑在父组件中将这个值传递给子组件的 data 中，然后通过子组件的 methods 方法来修改它。这样就可以实现动态修改 value 的值了。

vue3写个tabs组件，使用类似于<uui-tabs v-model="tabsaa" @change="change"> <uui-tabs-item label="配置管理" name="tab-1"> <p>你选择了配置管理</p> </uui-tabs-item> <uui-tabs-item label="角色管理" name="tab-2"> <p>你选择了角色管理</p> </uui-tabs-item> <uui-tabs-item label="啊啊哦哦" name="tab-3"> <p>你选择了啊啊哦哦</p> </uui-tabs-item> </uui-tabs>，写出完整代码

好的，下面是一个简单的示例：

<template>
  <div class="uui-tabs">
    <div class="uui-tabs-nav">
      <div class="uui-tabs-nav-item" 
           :class="{ active: activeTab === item.name }" 
           v-for="item in tabs"
           :key="item.name"
           @click="changeTab(item)">
        {{ item.label }}
      </div>
    </div>
    <div class="uui-tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UUITabs',
    props: {
      value: { // 绑定选中的标签页名称
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tabs: [], // 标签页列表
        activeTab: this.value // 当前选中的标签页名称
      }
    },
    watch: {
      value(newValue) { // 监听 value 的变化
        this.activeTab = newValue
      }
    },
    methods: {
      changeTab(tab) { // 切换标签页
        this.activeTab = tab.name
        this.$emit('change', tab)
      }
    }
  }
</script>

使用示例：

<template>
  <div>
    <uui-tabs v-model="activeTab" @change="changeTab">
      <uui-tabs-item label="配置管理" name="tab-1">
        <p>你选择了配置管理</p>
      </uui-tabs-item>
      <uui-tabs-item label="角色管理" name="tab-2">
        <p>你选择了角色管理</p>
      </uui-tabs-item>
      <uui-tabs-item label="啊啊哦哦" name="tab-3">
        <p>你选择了啊啊哦哦</p>
      </uui-tabs-item>
    </uui-tabs>
    <p>当前选中的标签页是：{{ activeTab }}</p>
  </div>
</template>

<script>
  import UUITabs from './UUITabs.vue'
  import UUITabsItem from './UUITabsItem.vue'

  export default {
    components: {
      UUITabs,
      UUITabsItem
    },
    data() {
      return {
        activeTab: 'tab-1'
      }
    },
    methods: {
      changeTab(tab) {
        console.log(tab.label, '被选中了')
      }
    }
  }
</script>

注意：上面的示例代码仅供参考，具体实现方式可能因项目需求而异。