首页 文章

隐藏元素或使用Vue显示元素时,MDL样式将丢失

提问于
浏览
0

隐藏和显示具有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组件,但它发生在滑块和开关上 .

1 回答

  • 0

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

相关问题