Vue.js/React/JSX：データ内の変数を使用してタグをスタイルする方法は？

Question

私は私が私が私には、次のことを考えていたJSXとディレクティブを使用することはできませんので

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

にonClick機能を持っている私のbutton_01を押したときに、スタイルを追加するhtml要素textarea_01を持っています

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

をそして、それは次のようになりますので、onClick私のコードで使われています私の機能に追加します：動作します

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

しかし、私は、私は別の要素をクリックした後、HTML要素にCSSプロパティを追加している、この問題を回避し、私が何をしたい達成するにはどうすればよい、働いていないとWebStormは

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

私に語りましたか？

注：Webpackとフォローインは、コードgithub.com/vuejs/babel-plugin-transform-vue-jsxで使用されています。ほとんどのビルトインVueディレクティブは、JSXを使用しているときはサポートされていません。 v-showは、v-show = {value}構文で使用できます。

Answer 1

あなたがタグプロパティに口ひげを使用することはできませんので、あなたは、Vueのにstyle属性をバインドする必要があります。

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

---

実行時にのみVueのバージョンを使用しているので、あなたは別のアプローチを試してみてください。

textareaから口ひげを削除します。

したい mountedフックまたは別の lifecycle hook上のjavascriptを持つ要素のスタイルを設定し

<textarea id="textareaID" /> 

：

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