<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可以取得父组件中数组的值,从而改变原有得值
时间: 2024-02-15 17:28:27 浏览: 25
这个组件的主要功能是实现一个顶部导航栏,其中包含两个按钮,分别是“实习”和“兼职”。当用户点击其中一个按钮时,该按钮会变成激活状态(即背景色变为透明,字体变大),另一个按钮则会变成非激活状态。同时,该组件还有一个props属性“tit”,用于接收父组件传递过来的标题。
若其他父组件调用该组件时,传递了一个数组作为参数,则可以通过在组件中定义一个props属性来接收该数组。然后在组件的data中定义一个isClicked1和isClicked2,分别表示“实习”和“兼职”按钮是否被点击。在methods中定义了两个函数toggleButton1和toggleButton2,分别用于处理按钮的点击事件。当用户点击其中一个按钮时,该函数首先判断该按钮是否已处于激活状态,若是则直接返回;否则将该按钮设为激活状态,另一个按钮设为非激活状态,并通过$emit方法向父组件发送一个事件“reset-buttons”,表示按钮已被重置。在组件的模板中,使用v-bind指令将isClicked1和isClicked2绑定到按钮的class属性上,从而实现激活和非激活状态的切换。同时,使用v-on指令将按钮的点击事件绑定到toggleButton1和toggleButton2函数上。最后,在样式中定义了按钮的基本样式和激活状态的样式。
相关问题
<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 的值了。
<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' },
],
};
},
```
这样就能在页面上正确显示按钮了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)