vueでcheckboxが入ってるときに表示ってできる？

はい、Vue.jsを使うと、v-model ディレクティブを使用してチェックボックスの状態を簡単に管理し、それに基づいて表示を制御できます。以下は具体的な例です。

例: チェックボックスの状態でメッセージを表示

<div id="app">
  <label>
    <input type="checkbox" v-model="isChecked"> チェックを入れる
  </label>
  <p v-if="isChecked">チェックが入っています！</p>
  <p v-else>チェックが入っていません。</p>
</div>
javascript
コードをコピーする
new Vue({
  el: '#app',
  data: {
    isChecked: false
  }
});

解説

v-model

チェックボックスの状態（checked or unchecked）が isChecked というデータプロパティと連動します。
v-if

isChecked の値が true のときに特定の要素（メッセージ）を表示します。
v-else を使うことで、isChecked が false の場合に別のメッセージを表示することもできます。

ポイント

複数のチェックボックスを管理したい場合、v-model を配列にバインドできます。
例: 複数選択のチェックボックス

<div id="app">
  <label>
    <input type="checkbox" value="option1" v-model="selectedOptions"> Option 1
  </label>
  <label>
    <input type="checkbox" value="option2" v-model="selectedOptions"> Option 2
  </label>
  <label>
    <input type="checkbox" value="option3" v-model="selectedOptions"> Option 3
  </label>
  <p>選択されたオプション: {{ selectedOptions }}</p>
</div>
javascript
コードをコピーする
new Vue({
  el: '#app',
  data: {
    selectedOptions: []
  }
});

これにより、選択されたオプションがリアルタイムで更新されます。用途に応じてカスタマイズしてください！