Vue.js 将活动的a类列添加到表中（如netflix中）

我需要帮助来选择一个表标题，并使用类选择您的列。就像Netflix一样。我是VueJS的noob

我的代码是

    <table class="table">
        <thead class="text-center">
            <tr>
                <th scope="col"><button type="button" class="btn plan_columnA selected" @click="planSelect('plan_columnA')">Column A</button></th>
                <th scope="col"><button type="button" class="btn plan_columnB" @click="planSelect('plan_columnB')">Column B</button></th>
                <th scope="col"><button type="button" class="btn plan_columnC" @click="planSelect('plan_columnC')">Column C</button></th>
            </tr>
        </thead>

        <tbody class="text-center">
            <tr>
                <td class="plan_columnA selected">Mark</td>
                <td class="plan_columnB">Otto</td>
                <td class="plan_columnC">@mdo</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Jacob</td>
                <td class="plan_columnB">Thornton</td>
                <td class="plan_columnC">@fat</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Larry</td>
                <td class="plan_columnB">the Bird</td>
                <td class="plan_columnC">@twitter</td>
            </tr>
        </tbody>
    </table>

我试着这么做，但我不知道这是否正确

export default {
    data () {
        return {
            planSelected: '',
        }
    },

    methods: {
        planSelect (plan) {
            this.planSelected = plan;

            $('.selected').removeClass('selected');
            $('.' + this.planSelected).addClass('selected');
        },
    },
}

我尝试了JQuery，但我想在VueJS中实现它

---

谢谢

这很简单，我已经给你举了个例子，希望它能在路上帮助你。为了获得更好的概述，应该使其更具动态性，但您可以使用我编写的代码

在理想情况下，您可以从数据变量生成所有行/列，而不是手动执行所有这些操作

我所做的只是有一个数据变量，您可以在不同的tds和按钮上设置并检查它

data: () => ({
    planSelected: 'plan_columnA'
})

选择计划的按钮：

<button type="button" class="btn plan_columnA" :class="{selected: planSelected === 'plan_columnA' }" @click="planSelected = 'plan_columnA'">Column A</button>

A列

以及要显示选定内容的实际列

<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>

标记

专业提示：永远不要将jQuery和VueJS结合使用-只需使用VueJS即可

<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>