下拉列表怎么写v-model
时间: 2023-12-01 07:41:38 浏览: 35
下拉列表的v-model绑定可以通过在select标签上使用v-model指令来实现。下面是一个简单的例子:
```html
<template>
<div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<p>你选择的是: {{ selected }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ text: '选项1', value: '1' },
{ text: '选项2', value: '2' },
{ text: '选项3', value: '3' }
]
}
}
}
</script>
```
在上面的例子中,我们使用了一个select标签来创建下拉列表,并使用v-for指令来循环渲染选项。在select标签上使用v-model指令来绑定选中的值,同时在选项上使用:value指令来绑定选项的值。
当用户选择一个选项时,v-model绑定的selected变量会自动更新,我们可以在页面上显示用户选择的值。