v-if写一个选择下拉列表
时间: 2023-10-19 12:21:57 浏览: 37
下面是一个使用 `v-if` 来实现选择下拉列表的示例:
```html
<template>
<div>
<label for="fruit">请选择一种水果:</label>
<select v-if="showFruit" id="fruit" name="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select>
<button @click="toggleShowFruit">{{ showFruit ? '隐藏' : '显示' }}水果选择</button>
</div>
</template>
<script>
export default {
data() {
return {
showFruit: false
};
},
methods: {
toggleShowFruit() {
this.showFruit = !this.showFruit;
}
}
};
</script>
```
在上面的代码中,我们使用 `v-if` 来控制是否显示选择下拉列表。初始时,列表是隐藏的。当点击按钮时,通过 `toggleShowFruit` 方法来切换 `showFruit` 数据属性的值,从而决定是否显示列表。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)