Vueの幅と内容の変更

Question

私はvuejsを使用しています。ユーザーがログインしているかどうかによって、トップバー内の2つの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文を使用していましたが、より良い方法があるかどうかは疑問でした。

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> 

あなたは、style属性を使用する必要がありv-bind

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

fiddle

Answer 2

使用して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>

を

Answer 3

のように、デフォルト値を使用して、データ内のデフォルトの幅を作成します。

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

あなたは幅の値を変更する必要があり、その後、あなたはこのような何かを行うことができますログインするたび：

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

それが役に立てば幸い！