Ternary operator Vue.js within Tag

Question

I am creating a Vuejs Component that I want to send a property to Component to display or hide an attribute inside the tag using ternary operator.

Double Quotes do not work inside the tag.

The result would be these two possibilities:

if Multiple is true

<div>
    <select name="select" multiple>
    </select>
</div>

if Multiple is false

<div>
    <select name="select">
    </select>
</div>

State of the current component

<template>
    <div>
        <select name="select" {{multiple ? 'multiple' : ''}}">
        </select>
    </div>
</template>
<script>
export default {
props: {
        multiple: {
            type: Boolean,
            default: true
        },
    }
}
</script>
<style>
</style>

Example of a call to Component

<component-select :multiple="false"></component-select>

Answer 1

You could also do

 <select name="select" :multiple = "multiple"/>

depends a lot on what you want, but I believe that in most cases this way would be more efficient because at the time of giving maintenance would not have rework to make the two selects work

Answer 2

A solution to the problem may be:

<template>
    <div>
        <select v-if="multiple" name="select" multiple>
        <select v-else="multiple" name="select">
        </select>
    </div>
</template>

Answer 3

I modified the above answer just to give a complement. But I followed the idea of @pedroolavo

<div>
    <select name="select" v-if="multiple" multiple>
    </select>

    <select name="select" v-else>
    </select>
</div>