绑定到选择元素

字符串数组

在 select 下拉列表中选择一个值并提供一个字符串数组时，所选值将作为一个字符串绑定到 select 元素的 value 属性，我们可以使用字符串插值显示该字符串。

export class MyViewModel {
    animals = [];
    favouriteAnimal = null;

    constructor() {
        this.animals = [
            'Cat',
            'Dog',
            'Fish',
            'Rabbit',
            'Tiger',
            'Bat'
        ];
    }
}

<template>
    ${favouriteAnimal}
    <select name="animals" value.bind="favouriteAnimal">
        <option repeat.for="animal of animals">${animal}</option>
    </select>
</template>

对象数组

与上面的示例不同，在提供对象数组时，在下拉列表中选择值时，绑定到该特定选项的模型是提供的对象。

export class MyViewModel {
    animals = [];
    favouriteAnimal = null;

    constructor() {
        this.animals = [
            {label: 'Cat', value: 99},
            {label: 'Dog', value: 493},
            {label: 'Fish', value: 934839200},
            {label: 'Rabbit', value: 8311},
            {label: 'Tiger', value: 22},
            {label: 'Bat', value: 3711}
        ];
    }
}

<template>
    <p>Favourite animal ID: ${favouriteAnimal.value}</p>
    <p>Favourite animal name: ${favouriteAnimal.label}</p>
    <select name="animals" value.bind="favouriteAnimal">
        <option repeat.for="animal of animals" model.bind="animal">${animal.label}</option>
    </select>
</template>