Vue.js/React/JSX：如何使用数据中的变量设置标签样式？

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

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

注意：代码中使用了 Webpack 和 followin github。com/vuejs/babel-plugin-transform-vue-jsx 请注意，使用 JSX 时几乎不支持所有内置的 Vue 指令，唯一的例外是 v-show ，可以与 v-show={value} 语法一起使用。

Answer 1

您必须将 style 属性绑定到 Vue，因为您不能在标签属性上使用胡须：

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

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

去掉 textarea 的小胡子:

<textarea id="textareaID" />

在 mounted 挂钩或您想要的另一个 lifecycle hook 上使用 javascript 设置元素的样式：

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
};

Vue.js/React/JSX：如何使用数据中的变量设置标签样式？

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

javascript

reactjs

react-jsx

vue.js