<template>
<div>
<h2>クラス名を動的に追加する</h2>
<!-- 第一の方法:物の形 -->
<!-- 第1パラメータ：クラス名、第2パラメータ：ブール値 -->
<!-- 物の形: 中括弧で囲み、クラス名は引用符で囲む。 -->
<!-- : カンマで区切って複数のオブジェクトを書くことができる。 -->
<p :class="{'p1' : true}">物の形</p>
<p :class="{'p1' : false, 'p': true}">物の形</p>
<!-- 第二の方法:3項式 Note: 配列に入れ、クラス名は引用符で囲む。-->
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三項式</p>
<!-- 第三の方法: 配列の形式 -->
<p :class="[isTrue, isFalse]">配列の形式</p>
<!-- 配列でオブジェクトを使う -->
<p :class="[{'p1': false}, isFalse]">配列でオブジェクトを使う</p>
<!-- : classメソッドでクラス名を返すメソッドを渡すこともできる。-->
<p :class="setClass">メソッドでクラス名を設定する</p>
</div>
</template>
<script>
export default {
data () {
return {
isTrue: 'p1',
isFalse: 'p'
}
}
method: {
setclass () {
return 'p1';
}
}
}
</script>
<style scoped>
.p1 {
color: red;
font-size: 30px;
}
.p {
color: blue
}
</style>
