javascript - Vue.js/React/JSX : How to style a tag using a variable in data?

Question

我有一个 html 元素 textarea_01，当我按下 button_01 时，我想向该元素添加样式，该元素上有 onClick 函数

myFunction: function(event) {
//some code that does something
};

由于我无法在 JSX 中使用指令，所以我认为以下方法可以工作:

<textarea id="textareaID" style={{resetWidth}}/>

并添加到我的代码中使用的 onClick 函数，因此它看起来像:

myFunction: function(event) {
var textarea = new Vue({
  el: '#textareaID',
  data: {
    resetWidth: 'width: 10px'
  }
})
//some code that does something
};

但它不起作用，WebStorm 告诉我

You are using the runtime-only build of Vue where the template compiler is not available

如何解决这个问题并完成我想做的事情，即在单击另一个元素后向 html 元素添加 css 属性？

注意:代码中使用了 Webpack 和以下内容 github.com/vuejs/babel-plugin-transform-vue-jsx 请注意，使用 JSX 时几乎所有内置 Vue 指令都不支持，唯一的异常(exception)是 v -show，可以与 v-show={value} 语法一起使用。

Answer 1

您必须将 style 属性绑定(bind)到 Vue，因为您不能在标签属性上使用 mustache :

<textarea id="textareaID" :style="resetWidth" />

<小时/>

因为您使用的是仅运行时的 Vue 版本，所以您应该尝试其他方法。

从文本区域中删除 mustache :

<textarea id="textareaID" />

使用 mounted Hook 或其他钩子(Hook)上的 javascript 设置元素的样式 lifecycle hook你想要的:

myFunction: function(event) {
    var textarea = new Vue({
        el: '#textareaID',
        data: {
            resetWidth: 'width: 10px'
        },
        mounted: function () {
            this.$el.setAttribute("style", this.resetWidth);
        },
    })
    //some code that does something
};