改写前的vue代码

这段代码使用 v-for 遍历 keys 数组，并为每个元素创建一个可点击的项。主要功能如下：

1. 选择键：点击时调用 selectKeyKey(item) 方法。
2. 高亮选中项：如果 item 等于 selectKey，则使用不同的样式类进行高亮。
3. 删除确认框：提供一个弹窗确认是否删除当前项，确认后调用 deleteKey(item)，取消则调用 cancel。

        <div v-for="item in keys" @click="selectKeyKey(item)">
            <div v-if="item === selectKey" class="item key-select-item">
                <div class="key-item-name">{{item}}</div>
                <div class="key-item-delete">
                    <a-popconfirm
                    title="Are you sure delete this task?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="deleteKey(item)"
                    @cancel="cancel"
                    >
                        <a href="#">Delete</a>
                    </a-popconfirm>
                </div>
            </div>
            <div v-else class="item key-item">
                <div class="key-item-name">{{item}}</div>
                <div class="key-item-delete">
                    <a-popconfirm
                    title="Are you sure delete this task?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="deleteKey(item)"
                    @cancel="cancel"
                    >
                        <a href="#">Delete</a>
                    </a-popconfirm>
                </div>                
            </div>
        </div>

改写后的vue代码

通过绑定类名的方式可以使代码更灵活。

这样写的好处是避免了使用 v-if 和 v-else，而是通过动态绑定类名来控制样式，使得结构更加简洁清晰。

<div v-for="item in keys" @click="selectKeyKey(item)">
    <div :class="{'item key-item': item != selectKey, 'item key-select-item': item == selectKey}">
        <div class="key-item-name">{{item}}</div>
        <div class="key-item-delete">
            <a-popconfirm
            title="Are you sure delete this task?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deleteKey(item)"
            @cancel="cancel"
            >
                <a href="#">Delete</a>
            </a-popconfirm>
        </div>
    </div>
</div>