用vue语法,写一个demo,要求:用遥控器操作来选择下拉框的值,下拉框的选项有TYY001、TYY002
时间: 2024-04-10 20:33:25 浏览: 135
vue实现的下拉框功能示例
5星 · 资源好评率100%
好的,以下是一个使用Vue语法编写的满足你要求的Demo:
```vue
<template>
<div @keydown.up="moveUp" @keydown.down="moveDown" @keydown.enter="selectOption">
<label for="cinemaCode">影城编码:</label>
<select id="cinemaCode" v-model="selectedCinemaCode">
<option v-for="(option, index) in cinemaCodes" :key="index" :value="option">{{ option }}</option>
</select>
<br>
<label for="cinemaName">影城名称:</label>
<select id="cinemaName" v-model="selectedCinemaName">
<option v-for="(option, index) in cinemaNames" :key="index" :value="option">{{ option }}</option>
</select>
<br>
<button @click="save">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
cinemaCodes: ['TYY001', 'TYY002'],
cinemaNames: ['TYY001', 'TYY002'],
selectedCinemaCode: '',
selectedCinemaName: '',
selectedIndex: 0
}
},
methods: {
moveUp() {
this.selectedIndex = (this.selectedIndex - 1 + this.cinemaCodes.length) % this.cinemaCodes.length;
},
moveDown() {
this.selectedIndex = (this.selectedIndex + 1) % this.cinemaCodes.length;
},
selectOption() {
this.selectedCinemaCode = this.cinemaCodes[this.selectedIndex];
this.selectedCinemaName = this.cinemaNames[this.selectedIndex];
},
save() {
// 在这里实现保存逻辑
console.log('保存成功!');
}
}
}
</script>
```
在这个Demo中,使用了`@keydown`指令监听键盘事件。按上键会切换选项的选中状态向上移动,按下键会切换选项的选中状态向下移动,按回车键会选择当前选中的选项。选中的选项会绑定到`selectedCinemaCode`和`selectedCinemaName`中,点击保存按钮后可以执行保存逻辑。
阅读全文