各種v-bindの書き方メモ

触り始めたばかりで、propsを渡す時しょっちゅう書き方が忘れちゃっうから、ちょっとまとめてみようと思います

数字

<my-component :size="{{ 50 }}"><my-component>
<my-component :size={{ 50 }}><my-component>
<my-component :size=50><my-component>

数字(Number)タイプの変数

<my-component :size="{{ $size }}"><my-component>

文字列(String)

<my-component first-name="{{ $firstName }}"><my-component>

laravelのroute

<my-component path="{{ route('admin.login') }}"><my-component>

Boolean値

<my-component :disabled="false"><my-component>

Boolean変数

<my-component :disabled="{{ $disabled ? 'true' : 'false'}}"><my-component>

配列

<my-component :order-list='@json($orderList)'><my-compoent>

三項演算子

<my-component :label="{{ $total>100 ? 'green' : 'red'}}"><my-component>

null

<my-component :value="null"><my-component>