Vue更改寬度和內容

我使用vuejs並根據用戶是否登錄，我需要調整我的頂欄內的兩個div的大小和內容。所以，如果他們沒有在它記錄應該是這樣的：Vue更改寬度和內容

<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語句，但我想知道是否有更好的方法。

來源

2017-08-17 JFugger_jr

<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

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

fiddle

來源

2017-08-17 08:44:51 choasia

你應該使用樣式屬性綁定在vuejs風格：

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>

來源

2017-08-17 08:47:00 kevguy

創建數據內默認寬度與默認值，如：

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

每次你登錄你應該改變寬度值，然後你可以做這樣的事情：

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

希望能幫助到你！

來源

2017-08-17 08:48:45

Vue更改寬度和內容

回答

相關問題