Skip to content

Instantly share code, notes, and snippets.

View yamotech's full-sized avatar

Tomoki Yamauchi yamotech

View GitHub Profile
@yamotech
yamotech / index.html
Created December 14, 2019 10:09
Vue.js インラインスタイルのバインディング 配列構文
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">配列構文</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 10:07
Vue.js インラインスタイルのバインディング オブジェクト構文
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">オブジェクト構文</div>
<div v-bind:style="styleObject">直接 style オブジェクトに束縛する</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 10:03
Vue.js クラスとスタイルのバインディング コンポーネント
<div id="app">
<my-component class="baz boo"></my-component>
<my-component v-bind:class="{ active: isActive }"></my-component>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 10:01
Vue.js 配列構文2
<div id="app">
<div v-bind:class="[isActive ? activeClass : '', errorClass]">三項演算子</div>
<div v-bind:class="[{ active: isActive }, errorClass]">オブジェクト構文</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 10:00
Vue.js 配列構文
<div id="app">
<div v-bind:class="[activeClass, errorClass]">配列構文</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 09:58
Vue.js オブジェクト構文3 算出プロパティに束縛
<div id="app">
<div v-bind:class="classObject">算出プロパティに束縛</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 09:56
Vue.js オブジェクト構文2
<div id="app">
<div v-bind:class="classObject">オブジェクト構文</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 09:55
Vue.js オブジェクト構文
<div id="app">
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">クラスのバインディング</div>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 09:42
Vue.js ウォッチャ
<div id="app">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
@yamotech
yamotech / index.html
Created December 14, 2019 09:40
Vue.js 算出 setter 関数
<div id="app">
{{ fullName }}
</div>