ホームページ > 記事 > ウェブフロントエンド > vue.js スタイル バインディングの問題
class と style は HTML 要素の属性であり、要素のスタイルを設定するために使用されます。スタイル属性を設定するには v-bind を使用します。
次の例では、style タグにクラス スタイルを設定します。vue インスタンスにはブール値 isActive が 1 つだけあり、ブール値に基づいてスタイルをバインドします。値をレンダリングするかどうかを決定します。
<style>.active { width: 100px; height: 100px; background: green;}</style><p id="app"> <p v-bind:class="{ active: flag}"></p></p><script>new Vue({ el: '#app', data: { flag: true } }) </script>
複数のクラスをバインド
v-bind:class="{ active: isActive, 'text-danger': hasError }">
オブジェクトの形式で複数のクラスをバインド
<p id="app"> <p v-bind:class="classObject"></p></p><script>new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script>
配列の形式でスタイルをバインド
<p id="app"> <p v-bind:class="[activeClass, errorClass]"></p></p><script>new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script>
インラインスタイルバインディング
<p id="app"> <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</p></p><script>new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } })
オブジェクトを使用してインラインスタイルをバインド
<p id="app"> <p v-bind:style="styleObject">菜鸟教程</p></p><script>new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } }) </script>
以上がvue.js スタイル バインディングの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。