Vue中的select组件,使用v-for遍历实现option内容
Vue中的select下拉框1:原始的select标签试中option选项内容直接写在HTML中。2:select组件使用v-for遍历来实现select下拉框中的option值在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。option标签中的值是浏览器显示在下拉列表中的内容,而 value 属性中的值是表单被提交时被发送到服务器的值
·
Vue中的select下拉框
1:原始的select标签试中option选项内容直接写在HTML中。
2:select组件使用v-for遍历来实现select下拉框中的option值。
在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。
option标签中的值是浏览器显示在下拉列表中的内容,而 value 属性中的值是表单被提交时被发送到服务器的值。
注释:如果没有指定 value 属性,选项的值将设置为option标签中的内容。
下拉框效果:
option内容写在HTML中:
html:
<div id="app">
<select v-model="selected">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</div>
js:
<script>
new Vue({
el: '#app',
data: {
selected: ''
},
})
</script>
option内容写在js中,通过v-for遍历:(iview组件库中的select组件)
<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
export default {
data () {
return {
cityList: [
{
value: '1',
label: '1'
},
{
value: '2',
label: '2'
},
{
value: '3',
label: '3'
},
{
value: '4',
label: '4'
},
],
model1: ''
}
}
}
</script>
更多推荐
所有评论(0)