当元素被Vu​​e隐藏或显示时，MDL样式会丢失

Question

使用Vue隐藏和显示元素时，会丢失某些mdl样式。请参见以下CodePen示例：https://codepen.io/anon/pen/RBojxP

HTML：

<!-- MDL -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

  <!-- Vue (latest stable) -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

  <div id="main">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col">
        <!-- Slider -->
        <div v-if="showSlider" id="sliderContainer">
          <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0">
        </div>
        <button @click="showSlider = !showSlider" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">
          Toggle Slider
        </button>
      </div>
      <div class="mdl-cell mdl-cell--6-col">
        <!-- Switch -->
        <label v-if="showSwitch" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
          <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
          <span class="mdl-switch__label"></span>
        </label>
        <button @click="showSwitch = !showSwitch" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">
          Toggle Switch
        </button>
      </div>
    </div>
  </div>

JS：

var app = new Vue({
  el: '#main',
  data: {
    showSlider: true,
    showSwitch: true
  }
})

几次切换按钮，即可查看样式离开。不知道这是Vue问题还是MDL问题。我不确定这是否适用于所有MDL组件，但它会在滑块和开关上发生。

Answer 1

（当然）在发布后一分钟找到了解决方案。我正在使用v-if，而我需要使用v-show