VET-3.

1: インラインスタイルを使う
Original Title 03_01 Using Inline Styles

Original URL https://raybo.org/slides_vue3/notes/slides/03_01%20Using%20Inline%20Styles/

Created @2023 年3⽉13⽇ 20:03

Tags

1. :style でバインディング
<div :style="{ color: 'blue', 'font-weight': myWeight, fontSize: mySize + 'em' }">
Headline
</div>

通常のhtmlでのインラインスタイルと違うのは, :style="オブジェクト" である点. つまり上記の例をオブジェクトっぽく改

⾏し直すと以下のようになる：
{
color: 'blue',
// color はキャメルケースの変数だから引⽤符不要.
// 'blue' は⽂字列の値だから引⽤符が必要.
'font-weight': myWeight,
は⽂字列の値; これを
// 'font-weight'
// fontWeightと書き直せば引⽤符は不要になるのだ.
// myWeight は 内で定義されている変数
data
fontSize: mySize + 'em'
}
// 各ペア間を ',' で区切っている点にも注意.

ここでオブジェクトのキーで使われてるのはJavaScriptでstyle属性を設定するときに使うやつね. Element.style.color

とか. 基本的にcss属性をキャメルケースにすればOK. ( -> など ) background-color backgroundColor

data(){
return {
myColor: 'red',
myWeight: 100,
mySize: 3
}
}

2. オブジェクト表記法 (Object Notation)

まあ上記 html のような指定の仕⽅は冗⻑だしわかりづらい.
というわけで, 以下のように 中で指定内容をオブジェクト変数として設定しておけば, htmlではそのオブジェクト
data

名を指定するだけでよくなる.
<div :style="myStyles">Headline</div>

data() {
return {

VET-3.1: インラインスタイルを使う 1
 myStyles: {
color: 'blue',
fontWeight: 100,
fontSize: '5em'
}
}
}

この⽅法ならあとでプログラム的にmyStylesの⼀部の値を変更することも簡単になる. たとえば myStyles.color = 'red'

みたいに.
3. アレイ構⽂ (Array Syntax)
あれ以降分を利⽤すれば, 複数のスタイル設定を組み合わせて使うことができる.
<div :style="[stylesA, stylesB]">Headline</div>

オブジェクトじゃなくアレイが⼊ってますね.
data() {
return {
stylesA: {
color: 'blue'
bgColor: 'yellow'
},
stylesB: {
fontWeight: 100,
fontSize: '5em'
}
}
}

4. プレフィクスの付与 (Prefixing)
Auto-prefixing

When you use a CSS property that requires a vendor prefix in :style , Vue will
automatically add the appropriate prefix. Vue does this by checking at runtime to see
which style properties are supported in the current browser. If the browser doesn't support
a particular property then various prefixed variants will be tested to try to find one that is
supported.
でベンダー プレフィックスを必要とする CSS プロパティを使⽤すると、Vue は
:style

適切なプレフィックスを⾃動的に追加します。
Vue は実⾏時にチェックして、現在のブラウザでサポートされているスタイル プロパテ
ィを確認することでこれを⾏います。
ブラウザーが特定のプロパティをサポートしていない場合は、サポートされているもの
を⾒つけるために、さまざまなプレフィックス付きのバリアントがテストされます。
( 公式 https://vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles )

VET-3.1: インラインスタイルを使う 2
 はデフォルトで, ブラウザのバージョンなどによって必要になるプレフィクス ( , , など) を⾃動で追
Vue.js webkit ms

加してくれるという. まあたぶん を使う場合だけのはなしかな？ :style

でも下記の例のように⼿動で表記⽅法を指定することもできる. 下記ではブラウザが flex を理解できるならそれを

使い, ダメなら他を使う, ということをするようだ. 表記順に意味はあるのかな? 普通のcssならflexを先に指定する
気がするけど.
<div :style="{ display: ['-webkit-box', 'ms-flexbox', 'flex'] }">
something
</div>

5. 練習問題 (Practice)
1. ＋ボタンを⾓丸矩形じゃなく円形に変更
2. ＋ボタンにgreenボーダーを追加: これにはembeddedオブジェクトまたはseparateオブジェクト変数を使って
みよう.
3. の場合に のbackgroundを変更: カートアイコンにred背景を設定してみよう.
cartTotal >= 100 cart

私の回答
...
⾏⽬に
<!-- (1)(2) 36 :style... を追加 -->
<button @click="addToCart(item)" class="btn btn-success" :style="[ { borderRadius: '50%' }, borderStyle ]">+</button>

⾏⽬
// (2) 9 ( data()中 に追加
)
borderStyle: {
borderWidth: '5px',
borderColor: 'darkgreen'// green だとわかりづらいので変更した
borderStyle: 'solid'
}

(3)がわからなかった.
まずredにする⽅法だが
cartTotalの値に応じてということだからif⽂が書けないといけない。
「cartStyleというcomputed変数を⽤意して、その中にif⽂を設定して2種類のreturnを⾏う」という⽅法を試し
たがうまくいかず。
html内でcart button に :style="cartStyle" とやるんだからcomputed変数たるcartStyleはreturnでオブジェクトを
返さないといけない。returnでオブジェクトを返すには？computed変数の定義の中でletを使って⼀時的なオブ
ジェクトを⽤意すればよかった？
けっきょくこの辺で失敗したので嫌になって解答を⾒た。
結果は、
まず 中でデフォルトのカートのスタイル
data を設定する。ここで
cartStyle とするら backgroundColor: 'auto'

しい。 に が設定できるのはびっくりだったが、Bootstrapのスタイルを残す⽅法についても
background-color auto

疑問だったので納得する。
そしてif⽂の設定箇所だが、これが の
methods 中だった。カートにものを追加したときに
addToCart() cartTotal

を確認し、100以上なら……と設定するとのこと。

VET-3.1: インラインスタイルを使う 3
 // answer
methods: {
addToCart(product) {
this.cart.push(product);

// 以下 ⾏が追加箇所
3
if (this.cartTotal >= 100) {//この this も必要
this.cartStyle.backgroundColor = 'red'//この this も必要
}

},
...,
}

https://raybo.org/slides_vue3/notes/slides/03_01 Using Inline Styles/

VET-3:スタイルとアニメーション
VET-3.2: CSSクラスを使う

VET-3.1: インラインスタイルを使う 4