JFugger_jr JFugger_jr - 8 months ago 111
CSS Question

Vue change width and content

I am using vuejs and depending on whether the user is logged in, I need to adjust the size and content of two divs inside my topbar.
So if they aren't logged in it should be like this:

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


And when they're logged in it should be like this:

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


I know i can achieve this by hardcoding both of them entirely and then using v-if statements but I was wondering if there was a better way.

Answer Source
<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>

You can bind style in vuejs by using v-bind

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

fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download