Vue改变宽度和内容

Question

我正在使用 vuejs，根据用户是否登录，我需要调整我的 topbar 中两个 div 的大小和内容。所以如果他们没有登录，它应该是这样的：

 <div id='search' width="400px"></div><div id="login" width="200px"><img></div>

当他们登录时，它应该是这样的：

 <div id='search' width="200px"></div><div id="login" width="400px"><div id='somecontent></div><div id='morecontent'></div></div>

我知道我可以通过将它们完全硬编码然后使用 v-if 语句来实现这一点，但我想知道是否有更好的方法。

原文由 JFugger_jr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<div id='search' :style="{width: loggedIn ? '200px' : '400px'}"></div>
<div id="login" :style="{width: loggedIn ? '400px' : '200px'}">
  <div id='somecontent' v-if="loggedIn"></div>
  <div id='morecontent' v-if="loggedIn"></div>
  <img v-if="!loggedIn">
</div>

您可以使用 v-bind 在 vuejs 中绑定样式

new Vue({
  ...
  data: {
    loggedIn: false
  }
  ...
})

小提琴

原文由 choasia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用默认值在数据中创建默认宽度，例如：

 data() {
        return {
            myWidth: '200'
        }
    },

每次登录时，您都应该更改宽度值，然后您可以执行以下操作：

 <div :style="{ width: myWidth + 'px' }" id='search' width="400px"></div>

希望能帮助到你！

原文由 Filipe Costa 发布，翻译遵循 CC BY-SA 3.0 许可协议