<template> <div class="top_nav" v-for="item in tits" :key="item.id"> <input type="button" :class="{'my-button': true, 'active': isClicked1}" value="item.title" @click="toggleButton1"> <input type="button" :class="{'my-button': true, 'active': isClicked2}" value="item.title" @click="toggleButton2"> </div> </template> <script> export default { name:'homeHeader', data() { return { isClicked1: true, isClicked2: false, tits:[], } }, 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>为什么第三行第四行不能显示

在模板中的第三行和第四行，你使用了 `item.title`，但是没有用双花括号包裹起来，应该写成 `{{item.title}}`。这样才能正确地将 `item.title` 的值渲染到页面上。修改后的代码如下所示：

<template>
  <div class="top_nav" v-for="item in tits" :key="item.id">
    <input type="button" :class="{'my-button': true, 'active': isClicked1}" :value="item.title" @click="toggleButton1">
    <input type="button" :class="{'my-button': true, 'active': isClicked2}" :value="item.title" @click="toggleButton2">
  </div>
</template>

同时，你的 `tits` 数组是空的，所以即使你将 `item.title` 渲染到页面上也不会显示任何内容。你需要在 `data` 中初始化 `tits` 数组，例如：

data() {
  return {
    isClicked1: true,
    isClicked2: false,
    tits: [
      { id: 1, title: 'Button 1' },
      { id: 2, title: 'Button 2' },
    ],
  };
},

这样就能在页面上正确显示按钮了。