vuejs2 - 值不为空时VueJS显示按钮 - Thinbug

值不为空时VueJS显示按钮

时间：2018-11-07 06:28:17

标签： vuejs2 bootstrap-vue

我对使用VueJS很陌生，想知道是否有一种方法可以仅显示一个按钮（包含一个插槽），以仅显示是否为该插槽提供了按钮值。

我正在使用BootstrapVue Modals，代码如下：

我无法在代码段中成功运行模式，但下面是打开的模式的屏幕截图。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>

<body>
  <div id="app">
    <b-btn @click="showModal" class="modalBtn">
      <slot name="modalOpenBtn">Open Me</slot>
    </b-btn>

    <b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
      <h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
            <p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>

      <div slot="modal-footer" class="w-100 d-flex align-items-center">
        <b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
          <slot name="modalCloseBtn">btn 1</slot>
        </b-btn>

        <b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
          <slot name="modalOkBtn">btn 2</slot>
        </b-btn>
      </div>
    </b-modal>
  </div>

  <script>
    new Vue({
      el: '#app',
      components: { App },
      methods: {
        showModal () {
          this.$refs.myModalRef.show()
        },
        hideModal () {
          this.$refs.myModalRef.hide()
        }
      }
    });
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分：2)

您可以使用Vues v-if指令有条件地渲染任何元素：

// generic
<button v-if="myBooleanCondition">...</button>

// exmaple
<button v-if="something == true">...</button>

https://vuejs.org/v2/guide/conditional.html