javascript - 当使用 Vue 隐藏或显示元素时，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 组件，但它发生在 slider 和开关上。

Answer 1

发布后一分钟(当然)找到了解决方案。我正在使用 v-if 并且我需要使用 v-show