Vue.js 实现 div 之间无缝隙效果 - 代码示例

要让div之间无缝隙，可以使用Vue的内置样式绑定v-bind:class来设置margin和padding的值为0。

例如，HTML代码如下：

<div id="app">
  <div class="box" :class="{ 'no-gap': noGap }"></div>
  <div class="box" :class="{ 'no-gap': noGap }"></div>
  <div class="box" :class="{ 'no-gap': noGap }"></div>
</div>

Vue实例代码如下：

new Vue({
  el: '#app',
  data: {
    noGap: true
  }
});

CSS样式如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
  padding: 10px;
}

.no-gap {
  margin-bottom: 0;
}

在上述代码中，通过动态绑定v-bind:class来切换no-gap类，当noGap为true时，div之间的margin-bottom会被设置为0，这样就可以实现无缝隙的效果。

可以通过修改noGap的值来控制是否显示无缝隙的效果。