Question

我在vue.js中拥有

                        <button v-bind:class="[mdc-tab, {index==currentTab : mdc-tab--active}]" role="tab" aria-selected="true" v-for="(tab,index) in tabs.data" v-bind:key="tab.id">
                            <span class="mdc-tab__content">
                                <span class="mdc-tab__icon material-icons" aria-hidden="true">{{tab.icon}}</span>
                                <span class="mdc-tab__text-label">{{tab.name}}</span>
                            </span>
                            <span v-bind:class="[mdc-tab-indicator, {index==$root.currentTab : mdc-tab-indicator--active}]">
                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                            </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>

index是循环的当前索引。 currentTab来自

            tabs : {
                currentTab : 0,
                data : [
                    {icon:'title',name:'Name'},
                    {icon:'style',name:'Tags'},
                    {icon:'info',name:'Status'},
                    {icon:'warning',name:'Restriction'},
                    {icon:'keyboard_arrow_right',name:'Other'}
                ]
            }

我收到此错误

- invalid expression: Unexpected token == in

    [mdc-tab, {index==currentTab : mdc-tab--active}]

  Raw expression: v-bind:class="[mdc-tab, {index==currentTab : mdc-tab--active}]"

我该如何解决？

谢谢

Answer 1

您需要相反的操作，即将类名作为键，将条件作为值：

    Scanner input = new Scanner(System.in);
    System.out.println("Want to play a game?? If yes, hit 1, if not enter -1 " );
    int gameStart = input.nextInt();
    int count = 0;
    while(gameStart == 1) {
        System.out.println("Enter an adjective");
        String Adj1 = input.nextLine();
        System.out.println("Enter another adjective");
        String Adj2 = input.nextLine();
        ....
        System.out.print("So get this, one day a man who is " + Adj1 ... ); 
        System.out.println("Wanna play again?? ");
    }

    while(gameStart == -1) {
        System.out.println("FINE I DIDN'T WANNA PLAY WITH YOU ANYWAYS!!");
        break;
    }



    }
}

与指标相同：

v-bind:class="['mdc-tab', { 'mdc-tab--active': index === tabs.currentTab }]"

如何访问vue.js中的循环元素索引？

1 个答案: