Vue.js仅在fullWidth设置不为真时才渲染v容器

Question

我具有以下结构，并且仅当网站设置不是fullWidth时，我才希望包含容器。

目前，如果我设置fullWidth = false，则无法看到HelloWorld组件，但我想看到它，但仅限于不在容器中。

<v-content>
  <v-container v-if="!layoutIsFullWidth()">
    <HelloWorld/>
  </v-container>
</v-content>

我知道这是一个愚蠢的问题，但是我已经尝试了一切，没有找到类似的情况，或者我不知道要搜索什么。

谢谢！

Answer 1

正如我所说，使用CSS for showing/hiding content depending on the window width。

但是，如果您要使用JS / Vue解决方案，请按照控制台中的说明删除括号：

  

[Vue警告]：渲染错误：“ TypeError：layoutIsFullWidth不是函数”

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    settings: {
      layout: {
        darkTheme: false,
        fullWidth: false
      }
    },
    leftDrawer: {
      activated: true,
      opened: false
    }
  },
  methods: {
    hasLeftDrawer() {
      return this.leftDrawer.activated;
    },
    layoutIsFullWidth() {
      return this.settings.layout.fullWidth;
    },
    layoutIsDarkTheme() {
      return this.settings.layout.darkTheme;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-if="!layoutIsFullWidth">{{ message }}</p>
</div>

为此，最好使用computed property：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    settings: {
      layout: {
        darkTheme: false,
        fullWidth: false
      }
    },
    leftDrawer: {
      activated: true,
      opened: false
    }
  },
  computed: {
    hasLeftDrawer() {
      return this.leftDrawer.activated;
    },
    layoutIsFullWidth() {
      return this.settings.layout.fullWidth;
    },
    layoutIsDarkTheme() {
      return this.settings.layout.darkTheme;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-if="!layoutIsFullWidth">{{ message }}</p>
</div>