Question

我有一个html元素In [164]: df Out[164]: a b 0 1 2.0 1 3 4.0 2 5 6.0 In [165]: df_out Out[165]: a b 0 [1, 3, 5] [2, 4, 6] In [166]: df_back Out[166]: a b 0 1 2 1 3 4 2 5 6，当我按下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和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" />

使用javascript在mounted挂钩或您想要的其他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
};

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

1 个答案: