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

Question

我的组件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>

我想在选择中添加条件

如果 type = 1，则选择时不需要像这样显示：

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

如果 type = 2，则在选择显示上需要这样：

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

我该怎么做？

Answer 1

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

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

这样做，如果type == 2，则选择元素将只有required 属性。