Option 2 - さまざまなレンダリング

Exercise 1: 算出プロパティ

何らかの計算結果をプロパティとして扱うことができる算出プロパティを実装します。まず <script> タグ内に computed オブジェクト内のメソッドとして実装します。ここでは、 msg プロパティを拡張して + TypeScript! という文字列を結合されるようにしています。
```
// 算出プロパティを実装
computed: {
  computedMsg(): string {
    return this.msg.replace(/!/g, "") + " + TypeScript!";
  }
}
```
テンプレート側には TypeScript の getter として定義したメソッド名を、 data 内のプロパティと同じように mustache 記法で記述します。
```
<h3>算出プロパティ</h3>
<p>{{ computedMsg }}</p>
```
ブラウザに「Hello Vue + TypeScript!」と表示されていれば成功です。

Exercise 2: 条件付きレンダリング

ブロックを条件に応じて描画したい場合に使用する条件付きレンダリングを実装します。まずビューモデルの data() 内に、表示を判定するためのフラグとしてのプロパティ detail を定義し、methods オブジェクト内に、フラグを true にするためのメソッドを追加します。
```
data() {
  return {
    // （途中省略）
    // 1. プロパティを追加します
    detail: false
  }
},
methods: {
  // （途中省略）
  // 2. 条件付きレンダリングの制御用イベントハンドラを追加します
  showDetail(): void {
    this.detail = true;
  }
}
```
テンプレート側には v-if ディレクティブを使ったブロックとフラグを true にするためのボタンをマークアップします。
```
<h3>条件付きレンダリング</h3>
<button v-on:click="showDetail">表示</button>
<div v-if="detail">
  詳細が表示されました。
</div>
```
「表示」ボタンをクリックして、「詳細が表示されました。」がレンダリングされれば成功です。

Exercise 3: クラスとスタイルのバインディング

HTMLクラスやインラインスタイルを操作するためのクラスとスタイルのバインディングを実装します。まず、ビューモデルの data() 内に、表示を判定するためのフラグとしてのプロパティ hasError を定義し、methods オブジェクト内に、HTMLクラスを制御するためのメソッドも実装します。
```
data() {
  return {
    // （途中省略）
    // 1. プロパティを追加します
    hasError: false
  }
},
methods: {
  // （途中省略）
  // 2. クラスとスタイルのバインディング制御用イベントハンドラを追加します
  raiseError(): void {
    this.hasError = true;
  }
}
```

テンプレート側には v-bind:class ディレクティブに HTMLクラスを制御するオブジェクトをマークアップします。

<button v-on:click="raiseError">エラー</button>
<div v-bind:class="{ 'text-danger': hasError }">
  システムからのメッセージ
</div>

HTMLクラスのスタイルが適用された際に、テキストの色が変化するように <style> タグ内のCSSを定義します。
```
.text-danger {
  color: darkred;
}
```
「エラー」ボタンをクリックすると、「システムからのメッセージ」が赤色のテキストに変化すれば成功です。