Vue.js v-show或v-if div将其他div移到父容器中

我想动态地将image（勾选箭头）添加到包含其他div信息（image+texte）的div中

此添加意味着用户在应用程序中拥有此“对象”。他可以动态添加或取消选择此对象

此操作的结果是动态显示或消失箭头

这个过程在我的vue.js组件中运行得非常好。但每次箭头出现时，我都可以查看偏移量：

我尝试使用v-if或v-show vue.js指令，但结果是一样的

我不希望在启动选中项的操作时出现新的偏移量

这是HTML模板：

<div id="container">

    <div @click="checkedItem(key.id)" class="container-item" v-for="(key, value) in objects">
        <div class="check" v-show="checked[key.id]">
            <img height="35" width="35" src="../../../static/checked.png"></img>
        </div>
        <div class="image">
            <img src="https://picsum.photos/75/75/?image=25" alt="logo"></img>
        </div>
        <div class="name">{{ key.name }}</div>
    </div>

</div>

<style scoped>

    #container
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .container-item
    {
        display: flex;
        flex-direction: row;
        margin: 30px 30px 30px 30px;
    }

    .container-item div.check
    {
        z-index: 3;
        position: relative;
        left: 20px;
        bottom: 15px;
    }
    .container-item div.check > img
    {
        height: 35px;
        width: 35px;
    }

    .container-item div.image
    {
        z-index: 2;
        border: 1px solid blue;
    }

    .container-item div.name
    {
        z-index: 1;
        position: relative;
        top: 12px;
        right: 10px;
        text-align: center;
        line-height: 45px;
        width: 150px;
        max-height: 50px;
        border: 1px solid blue;
        background-color: yellow;
    }

</style>

    checkedItem: function (id)
    {
        let isChecked = this.checked[id] ? true : false
        isChecked ? this.checked[id] = false : this.checked[id] = true
    },

---

如何将DOM节点HTML“添加”到HTML模板组件vue.js中，而不动态创建新的偏移量？

正如我们在评论中所讨论的，这纯粹是CSS问题。您想要的是从布局流中取出

div.check

，这样它就不会影响其他元素的定位。这可以通过将

position:absolute

添加到其规则集来实现。要使其正常工作，请记住将

position:relative

也添加到其父级：

.container项{
显示器：flex；
弯曲方向：行；
利润率：30px 30px 30px 30px；
/*允许div.check相对于其父项进行定位*/
位置：相对位置；
}
.集装箱项目分类检查{
z指数：3；
左：20px；
底部：15px；
/*将check图标从布局流中移除*/
位置：绝对位置；
}

正如我们在评论中所讨论的，这纯粹是一个CSS问题。您想要的是从布局流中取出

div.check

，这样它就不会影响其他元素的定位。这可以通过将

position:absolute

添加到其规则集来实现。要使其正常工作，请记住将

position:relative

也添加到其父级：

.container项{
显示器：flex；
弯曲方向：行；
利润率：30px 30px 30px 30px；
/*允许div.check相对于其父项进行定位*/
位置：相对位置；
}
.集装箱项目分类检查{
z指数：3；
左：20px；
底部：15px；
/*将check图标从布局流中移除*/
位置：绝对位置；
}

只是想澄清一下：您只需要根据项目的已检查状态设置不同的偏移量？不，我想要完全相同的偏移量。在添加了绿色箭头检查之后，我不想让容器向右移动。这纯粹是CSS问题：只需在

.container item div.check

上使用

position:absolute

。您不希望检查图像的存在或不存在影响您的布局，因此您需要将其从流程中取出：这是通过使用绝对定位来完成的。只是为了澄清：您所需要的只是基于项目的检查状态的不同偏移？不，我想要完全相同的偏移。在添加了绿色箭头检查之后，我不想让容器向右移动。这纯粹是CSS问题：只需在

.container item div.check

上使用

position:absolute

。您不希望检查图像的存在或不存在影响您的布局，因此您需要将其从流程中取出：这是通过使用绝对定位来完成的。我确认该解决方案对我有效。设置父对象的相对位置和子对象的绝对位置（两个属性很重要）后的位置很重要。我确认解决方案对我有效。重要信息：设置父对象的相对位置和子对象的绝对位置（2个属性很重要）。