Vue 변경 폭 및 내용

Vue 변경 폭 및 내용

vuej를 사용하고 있는데 사용자가 로그인했는지 여부에 따라 탑바 안에 있는 두 개의 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 문을 사용하면 이 작업을 수행할 수 있지만 더 나은 방법이 없을까 생각했습니다.

<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를 사용하여 vuej에서 스타일을 바인딩할 수 있습니다.

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

만지작거리다

다음과 같은 기본값을 사용하여 데이터 내부에 기본 너비를 만듭니다.

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

로그인 할 때마다 너비 값을 변경해야 합니다.그러면 다음과 같은 조작을 할 수 있습니다.

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

도움이 되길 바래!

스타일 속성을 사용해야 합니다.

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>

언급URL : https://stackoverflow.com/questions/45730095/vue-change-width-and-content