Vue.jsのスタイルバインディングで動的に見た目を変える。

Vue.js

スタイルバインディングで動的に見た目を変えよう

v-bindを使いスタイルの指定をバインディングする、スタイルバインディングをしています。さらに、双方向バインディングと組み合わせて、スタイルをリアルタイムで変更しています。

スタイルバインディングの書き方 <div v-bind:style=”[何かのスタイル]”></div>
短縮形
<div :style=”[何かのスタイル]”></div>

大きさ(size)：

赤(red)：

緑(green)：

青(blue)：

HTML <div id=”app”>
<p>
<span>大きさ：</span>
<input
v-model=”range”
type=”range”
max=”500″
min=”10″
/>
</p>
<p>
<span class=”red”>赤：</span>
<input
v-model=”red”
type=”range”
max=”255″
min=”0″
/>
</p>
<p>
<span class=”green”>緑：</span>
<input
v-model=”green”
type=”range”
max=”255″
min=”0″
/>
</p>
<p>
<span class=”blue”>青：</span>
<input
v-model=”blue”
type=”range”
max=”255″
min=”0″
/>
</p>
<div :style=”bindStyle” ></div>
</div>

CSS .red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}

Javascript

new Vue({
el:’#app’,
data(){
return{
range:10,
red:0,
blue:0,
green:0
};
},
computed: {
bindStyle() {
return `width: ${this.range}px; height: ${this.range}px; background: rgb(${this.red}, ${this.green}, ${this.blue})`;
}
}
});

赤字のところの文字列はバッククォートで囲まれています。SHIFT　＋　＠キーでの「`」です。これはテンプレート文字列と呼ばれるもので、文字列内に変数の値や式の結果を埋め込むことができます。テンプレート文字列内の${ }という部分が埋め込むための記法です。

この本から引用、参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。