Vue Breite und Inhalt ändern

Question

Ich benutze vuejs und je nachdem, ob der Benutzer angemeldet ist, muss ich die Größe und den Inhalt von zwei Divs innerhalb meiner Topbar anpassen. Also, wenn sie nicht in sie eingeloggt so sein sollte:

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

Und wenn sie in es eingeloggt so sein sollte:

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

ich ich weiß, dies zu erreichen durch hartzucodieren beide komplett und dann mit v-if-Anweisungen, aber ich fragte mich, ob es einen besseren Weg gab.

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> 

Sie können mit v-bind

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

fiddle

Answer 2

Sie Stil in vuejs binden den Stil-Attribut verwenden soll:

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>

Answer 3

eine Standardbreite innerhalb Ihrer Daten mit dem Standardwert, wie erstellen:

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

jedes Mal wenn Sie Anmeldung erhalten Sie die Breite Wert ändern sollte, und dann können Sie etwas tun:

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

ich hoffe es hilft!