如何在select vue.js 2中添加所需或不需要的条件？

我的组件vue如下所示：

<template>
    <select class="form-control" v-model="selected" required @change="changeLocation">
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>\
    </select>
</template>
<script>
    export default{
        props: ['type'],
        ....
    };
</script>

<select class="form-control" v-model="selected" @change="changeLocation">

<select class="form-control" v-model="selected" required @change="changeLocation">

{{option.name}\
导出默认值{
道具：['type']，
....
};

我想在选择中添加条件

如果type=1，在屏幕上选择notdisplay required，如下所示：

<template>
    <select class="form-control" v-model="selected" required @change="changeLocation">
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>\
    </select>
</template>
<script>
    export default{
        props: ['type'],
        ....
    };
</script>

<select class="form-control" v-model="selected" @change="changeLocation">

<select class="form-control" v-model="selected" required @change="changeLocation">

如果类型=2，则在选择显示时，需要如下所示：

<template>
    <select class="form-control" v-model="selected" required @change="changeLocation">
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>\
    </select>
</template>
<script>
    export default{
        props: ['type'],
        ....
    };
</script>

<select class="form-control" v-model="selected" @change="changeLocation">

<select class="form-control" v-model="selected" required @change="changeLocation">

---

我该怎么做？

您可以将数据绑定到普通HTML属性。它不需要是组件属性

<select class="form-control" :required="type == 2" ...></select>

---

执行此操作时，如果

type==2

，可以将数据绑定到普通HTML属性，则select元素将仅具有

required

属性。它不需要是组件属性

<select class="form-control" :required="type == 2" ...></select>

执行此操作时，如果

type==2

，select元素将仅具有

required

属性