🔰

vue: v-select, v-if

2023/01/26に公開

v-select

scriptでは:

<script setup lang="ts">
import { ref } from 'vue';

// 選択中の値
const selected = ref<string>();

// リストの値
const relational = [
  { title: 'name1', value: 'a' },
  { title: 'name2', value: 'b' },
  { title: 'name3', value: 'c' },
];
</script>

templateでは:

<v-select
              v-model="selected"
              item-title="title"
              item-value="value"
              :items="relational"
            ></v-select>

v-if

簡単だ。

<div v-if="selected === 'a'">内容</div>

Read More

https://vuetifyjs.com/ja/components/selects/
https://vuejs.org/guide/essentials/conditional.html#v-else-if

Discussion