【Git】git addとgit commitを同時にやる方法
git addとgit commitを同時にやる方法
- git addを同時にしてしまうためコミットしたくないものがある時は使用してはいけない
git commit -am " コミットメッセージ"
【Vue】v-on イベント作成
v-on イベント作成
- @clickはv-on:clickの省略記法
- 以下は一度クリックすると購入ボタンが押せなくなるイベント
<div id="app">
<button @click="checkClick" :disbled="clicked">購入</button>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
clicked: false
},
methods: {
checkClick: funciton() {
this.clicked = true;
}
}
})
</script>
【Vue】v-for 配列繰り返し
v-for 配列繰り返し
<div id="app">
<ul v-for="week of weeks">
<li>{{ week }}</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
weeks: ['月', '火', '水', '木', '金', '土', '日']
}
})
</script>
【Vue】v-for 繰り返し構文
v-for 繰り返し構文
<div id="app">
<ul v-for="i of 繰り返したい数" :key="i">
<li>{{ i }}</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app"
})
</script>
【Vue】条件によって、表示、非表示切り替え
条件によって、表示、非表示切り替え
- v-ifでdisplayがtrueなら表示、displayがfalseなら非表示と切り替え
<div id="app">
<p class="alert" v-if="display">表示</p>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
display: false
}
})
</script>
【Vue】フォームと値の接続
フォームと値の接続
- v-modelを使用
<div id="app">
<input type="number" v-model="number"> = {{ number }}
</div>
<script>
let app = new Vue({
el: "#app",
data: {
number: 値
}
});
</script>
【Vue】クラス属性を書き換える
クラス属性を書き換える
- :class="プロパティー名"でクラス属性を書き換える
- :classはv-bind:classの省略記法
<div id="app">
<p :class="プロパティー名">クラス属性を書き換える<p>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
プロパティー名: 値
}
})
</script>
