0

Как по клику можно увеличить высоту блока?

По повторному клику сделать размер прежний.

new Vue({
  el: "#app",
  data: {
    big: false,
  },
  methods: {
    show() {
      this.big == false ? this.big = true : this.big = false;
      document.getElementById('app').className += 'posrelat';
    }
  },
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.me {
  position: relative;
  cursor: pointer;
  height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="me" @click="show">
    click me
  </div>
</div>

2 ответа 2

2

а можно и еще проще (без функции)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :class=" big  ? 'me' : 'posrelat' " @click="this.big = !this.big">
    click me
  </div>
</div>
0

Вы класс в темплейте не связали с переменной big

new Vue({
  el: "#app",
  data: {
    big: false,
  },
  methods: {
    show() {
      this.big = !this.big
      document.getElementById('app').className += 'posrelat';
    }
  },
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.me {
  position: relative;
  cursor: pointer;
  height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :class="{me: big}" @click="show">
    click me
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.