如何使用Vue实现点击按钮触发输入框高度变大效果及代码问题排查

代码问题说明 #

你的代码核心错误是Vue动态类名绑定不符合语法规则：
textarea标签上的:class="expand_message"绑定的是布尔类型变量，Vue不会将布尔值作为类名插入DOM，因此expand_message类名永远不会生效，高度切换功能自然无法实现。

修正方案 #

仅需要修改HTML部分的动态类名绑定逻辑，改成Vue支持的对象语法即可：

<div id="myApp">
   <textarea 
     class="message" 
     placeholder="please enter your message" 
     :class="{ expand_message: expand_message }"
   ></textarea>
   <a href="javascript:;" @click="btnClick">click</a>
</div>

如果需要更流畅的高度切换效果，可以给.message添加过渡属性、设置默认高度：

.message{
  display: block;
  /* 新增两行 */
  height: 42px;
  transition: height 0.2s ease;
}

.expand_message{
  height: 300px;
}

原JavaScript逻辑无需修改，即可实现点击切换输入框高度的效果。

内容的提问来源于stack exchange，提问作者WEI A