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语句,但我想知道是否有更好的方法。
答
<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
}
...
})
答
你应该使用样式属性绑定在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>
答
创建数据内默认宽度与默认值,如:
data() {
return {
myWidth: '200'
}
},
每次你登录你应该改变宽度值,然后你可以做这样的事情:
<div :style="{ width: myWidth + 'px' }" id='search' width="400px"></div>
希望能帮助到你!