Vue改变宽度和内容答案

【问题标题】：Vue change width and contentVue改变宽度和内容
【发布时间】：2018-01-25 13:44:52
【问题描述】：

我正在使用 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 语句来实现这一点，但我想知道是否有更好的方法。

【问题讨论】：

标签： html css vue.js vuejs2

【解决方案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
  }
  ...
})

fiddle

【讨论】：

我正在搜索在上应用宽度。

【解决方案2】：

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

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

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

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

希望对你有帮助！

【讨论】：

【解决方案3】：

你应该使用 style 属性：

const app = new Vue({
  el: '#app',
  data: {
    loggedIn: false
  },
  created() {
    /*
    if (CHECK_IF_USER_HAS_LOGGED_IN) {
        this.loggedIn = true
    }
    */
  },
  methods: {
    login() { this.loggedIn = true },
    logout() { this.loggedIn = false }
  }
});

#search, #login {
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <button v-on:click="login()">Log in</button>
  <button v-on:click="logout()">Log out</button>
  <div id='search' v-bind:style="{width: loggedIn ? '400px' : '200px'}">Search Stuff</div>
  <div id="login" v-bind:style="{width: loggedIn ? '200px' : '400px'}">
    <img v-if="!loggedIn" src="http://via.placeholder.com/350x150">
    <template v-if="loggedIn">
      <div id="somecontent">some content</div>
      <div id="morecontent">more content</div>
    </template>
  </div>
</div>

【讨论】：