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更改宽度和内容

回答

相关问题