请问老师怎么动态改变这里的值

<a href="#" :class="{'docker__title':true ,'docker__title--active':index===0}" @click="()=>changeColor(index)">{{item.text}}</a>

当点击相关的底部按钮时，显示对应的颜色。

是不是应该这里创建一个事件，然后再继续操作。这里传过去的index点击不同的名称会显示不同的数字0-3，我的想法是把index===0改变，不知道可不可行，但是自己又没思路实现。请老师指教。

慕仙7313728 2023-08-06

源自：项目：仿京东到家商家详情开发 2-16 通过 LocalStorage 实现购物车信息持久存储（2）

收起

1回答

好帮手慕小李 2023-08-07 09:59:02

同学你好，解答如下：

1、这么写是不行的需要循环一下，因为点击时只有index那么还需要有一个选项值比如叫active，它的默认值为0。然后将index与active进行比对如active==index?"给当前a标签添加类名":"默认值"

2、在vue中不要使用a标签。

同学可以按照这个思路去试试。

收起回答

提问者慕仙7313728 #1

李哥，这里怎么改成setup中定义呢？虽然这样写也可以改变底部点击后Class的样式

// data() {
    //     return {
    //         num:0
    //     }
    // },
    // methods:{
    //     changeColor(index){
    //         this.num=index
    //     }
    // },

但是改到setup中我这样写不知道怎么修改，因为是局部的变量。

setup() {
        const dockerList = [
            { icon: '&#xe63e;', text: '首页', to: { name: 'Home' } },
            { icon: '&#xe61d;', text: '购物车', to: { name: 'CarList' } },
            { icon: '&#xe623;', text: '订单', to: { name: 'CarList' } },
            { icon: '&#xe651;', text: '我的', to: { name: 'CarList' } }
        ]
        let info=reactive({num:0})
        const changeColor = (index) => {
            for (const i in dockerList) {
                // console.log(i, index);
                if (i == index) {
                    info = index
                }
                return info
            }
        }
        console.log(info);
        return { dockerList ,changeColor,info}
    }

模板中：

<ul class="docker__lis">
            <li v-for="(item, index) of dockerList" v-bind:key=index class="docker__item" @click="() => changeColor(index)">
                <router-link :to="item.to">
                <div class="iconfont" :class="[index == info ? 'active' : '']" v-html="item.icon">
                </div>
                    <div class=" docker__title" :class="[index == info ? 'active' : '']">{{ item.text }}</div>
                </router-link>
            </li>
        </ul>

2023-08-09 15:10:09

好帮手慕小李回复提问者慕仙7313728 #2

<template>
<div class="docker">
<div v-for="(item, index) in dockerList"
:class="[info.num === index ? 'docker__item docker__item--active' : 'docker__item']" :key="item.icon"
@click="() => changeColor(index)">

<router-link :to='item.to'>
<div class="iconfont" v-html="item.icon" />
<div class="docker__title">{{ item.text }}</div>
</router-link>
</div>
</div>
</template>

<script>
import { reactive } from "vue";
export default {
name: 'Docker',
setup() {
const dockerList = [
{ icon: '', text: '首页', to: { name: 'Home' } },
{ icon: '', text: '购物车', to: { name: 'CartList' } },
{ icon: '', text: '订单', to: { name: 'Home' } },
{ icon: '', text: '我的', to: { name: 'Home' } },
];

let info = reactive({ num: 0 })

const changeColor = index => info.num = index;

return { dockerList, changeColor, info }
}
}
</script>

<style scoped>
@import '../../style/viriables.scss';

.docker {
display: flex;
box-sizing: border-box;
position: absolute;
padding: 0 .18rem;
left: 0;
bottom: 0;
width: 100%;
height: .49rem;
border-top: .01rem solid $content-bgColor;

&__item {
flex: 1;
text-align: center;

a {
color: $content-fontcolor;
text-decoration: none;
}

.iconfont {
margin: .07rem 0 .02rem 0;
font-size: .18rem;
}

&--active {
a {
color: #1FA4FC;
}
}
}

&__title {
font-size: .2rem;
transform: scale(.5, .5);
transform-origin: center top;
}
}
</style>

2023-08-09 15:34:22