Блог

Главная - Вопросы по программированию - Как использовать vue для достижения щелчка, чтобы увеличить поле ввода

Как использовать vue для достижения щелчка, чтобы увеличить поле ввода

#javascript #vue.js

Вопрос:

Всем привет~ В настоящее время я только что вступил в контакт с vue . Есть проект, который должен увеличить поле ввода после нажатия кнопки, но мне трудно написать эффект! Я хотел бы попросить всех помочь мне выяснить, нет ли ошибки в коде. ? Спасибо всем вам за вашу помощь!

HTML

 <div id="myApp">

   <textarea class="message" placeholder="pleace enter you message" :class="expand_message"></textarea>
   <a href="javascript:;" @click="btnClick">click</a>
</div>

CSS

 .message{
  display: block;
}

.expand_message{
  height: 300px;
}

язык JavaScript

 let myApp = new Vue({
  el:"#myApp",
  data:{
    expand_message:true
  },
  methods:{
    btnClick: function(){
    // 點擊變紅色與回復原狀
    this.expand_message = !this.expand_message;
    },
  },
});

Мой шаблон программы

Ответ №1:

поэтому прежде всего постарайтесь сохранить код в stackoverflow. например, в вашем вопросе.

 <div id="myApp">
   <textarea placeholder="pleace enter you message" :class="['message', expand_message ? 'expand_message' : null]"></textarea>
   <button @click="btnClick">click</button>
</div>

И чтобы получить анимацию, вы не можете перейти на высоту, однако вы можете перейти на максимальную высоту:

 .message{
  display: block;
  max-height: 40px;
  height: 300px;
  transition: max-height ease-out 1s;
}

.expand_message{
  max-height: 300px;
}

Комментарии:

1. Прежде всего~Спасибо, что рассказали мне об этих методах! Кроме того, я хотел бы попросить вас помочь мне понять, хочу ли я меняться медленно, поднимаясь все выше, вместо того, чтобы подниматься сразу, я прав? Извините, только начал всему учиться, Все еще много неясного codepen.io/hong-wei/pen/mdwPZEP

Ответ №2:

Попробуйте это:

 :class="{'expand_message': expand_message}"
Метки: ,