当元素隐藏或使用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组件，但它发生在滑块和开关上。

Answer 1

在发布一分钟后找到了解决方案(当然(。我使用的是v-if，需要使用v-show