当前位置:网站首页>el-select,el-option下拉选择框
el-select,el-option下拉选择框
2022-07-05 02:43:00 【13少啊】
一.下拉选择框的使用
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
分析代码:
在el-select双向绑定一个value值
在el-option进行循环
通过V-for循环,循环options这个数组。
:key这里在循环一个数组的时候经常会用到,让渲染到达最大化。
:label 选项的标签,若不设置则默认与value相同
视图:
也就是下拉出来能看的。
:value 选项的值
验证:
二.实际的应用
<template>
<div class="">
{
{suibian}}
<el-select v-model="suibian">
<el-option v-for="(item,index) in arr" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
suibian:'',
arr:[
{
label:'1',
value:'1'
},
{
label:'2',
value:'2'
},
{
label:'3',
value:'3'
},
{
label:'5',
value:'5'
},
]
}
},
name: '',
methods: {
}
}
</script>
<style scoped>
</style>
三.总结
1.key 绑定的就是key值其中用到了diff算法 渲染最大化
2. :label关联的是选中的项目
3. :value 关联的是选中的值
4.el-select 通过v-model绑定的值关联到选中的值,可以是一个任意的值
边栏推荐
- 【LeetCode】501. Mode in binary search tree (2 wrong questions)
- Sqoop命令
- 8. Commodity management - commodity classification
- Using druid to connect to MySQL database reports the wrong type
- Asp+access campus network goods trading platform
- February database ranking: how long can Oracle remain the first?
- Icu4c 70 source code download and compilation (win10, vs2022)
- Problem solving: attributeerror: 'nonetype' object has no attribute 'append‘
- Redis distributed lock, lock code logic
- Last week's hot review (2.7-2.13)
猜你喜欢
Asynchronous and promise
Vb+access hotel service management system
Cut! 39 year old Ali P9, saved 150million
Pytest (5) - assertion
College Students' innovation project management system
Traditional chips and AI chips
【LeetCode】404. Sum of left leaves (2 brushes of wrong questions)
openresty ngx_lua執行階段
Missile interception -- UPC winter vacation training match
Apache Web page security optimization
随机推荐
Flume配置4——自定义MYSQLSource
Sqoop命令
this+闭包+作用域 面试题
Uniapp navigateto jump failure
Learn game model 3D characters, come out to find a job?
ASP. Net core 6 framework unveiling example demonstration [01]: initial programming experience
[understanding of opportunity -38]: Guiguzi - Chapter 5 flying clamp - warning one: there is a kind of killing called "killing"
Last week's hot review (2.7-2.13)
Medusa installation and simple use
【附源码】基于知识图谱的智能推荐系统-Sylvie小兔
Video display and hiding of imitation tudou.com
Voice chip wt2003h4 B008 single chip to realize the quick design of intelligent doorbell scheme
Yolov5 model training and detection
Apache build web host
Why is this an undefined behavior- Why is this an undefined behavior?
Avoid material "minefields"! Play with super high conversion rate
Action News
返回二叉树中两个节点的最低公共祖先
Missile interception -- UPC winter vacation training match
[200 opencv routines] 99 Modified alpha mean filter