Javascript Vue.js-基于文本长度为textarea应用CSS样式

我有Vue应用程序，我想在评论表单中添加受Facebook启发的按钮。我有一个简单的JS原型正在工作。但我无法让它在Vue组件中工作。我实现了两个变体，两个都被调用，但是两个变体中的样式都没有改变

侦听输入事件的回调

类属性中的条件

沙箱在那里：

回调变量：

<b-form-textarea
  class="textarea"
  ref="textareaRef"
  rows="1"
  max-rows="8"
  @input="adjustIconsInTextarea"
  placeholder="Type something"
  v-model="text"
></b-form-textarea>

adjustIconsInTextarea() {
  const textComment = this.$refs.textareaRef;
  const icons = this.$refs.iconsRef;
  if (textComment.value.length > 140) {
    textComment.style.padding = "13px 50px 34px 32px";
    icons.style.top = "-36px";
    icons.style.right = "72px";
  } else {
    textComment.style.padding = "10px 174px 5px 28px";
    icons.style.top = "-45px";
    icons.style.right = "68px";
  }
},

无论wrapText计算的属性值是多少，此选项都不会修改样式

---

如何让它工作？哪种方法更好？

您的类语法错误

：类

需要一个对象，该对象的类名为键，

true

或

false

为值。试着这样做：

:class="{icons_long: !wrapIcons}"

---

在我看来，我会采用CSS方法

另一种有效的语法是保留自己的语法，并添加回勾号和字符串插值：

:class="`${wrapIcons ? 'textarea_short' : 'textarea_long'}`" 

:class="`${wrapIcons ? 'textarea_short' : 'textarea_long'}`"