如何让span里的文字变为下拉框选择的数据 el-dropdown-menu el-dropdown-itemAction 1el-dropdown-item el-dropdown-itemAction 2el-dropdown-item el-dropdown-itemAction 3el-dropdown-item
要实现让span里的文字变为下拉框选择的数据,你可以使用Vue.js的数据绑定功能。首先,给下拉框绑定一个v-model,用来存储用户选择的值。然后,将下拉框选中的值绑定到span元素上,即可实现文字变化。
以下是一个示例代码:
<template>
<div>
<el-dropdown v-model="selectedAction">
<span class="el-dropdown-link">
<span style="margin-left: 1.8%;margin-top: 0.2%;">当前设备: {{ selectedAction }}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu>
<el-dropdown-item @click="selectedAction = 'Action 1'">Action 1</el-dropdown-item>
<el-dropdown-item @click="selectedAction = 'Action 2'">Action 2</el-dropdown-item>
<el-dropdown-item @click="selectedAction = 'Action 3'">Action 3</el-dropdown-item>
<el-dropdown-item @click="selectedAction = 'Action 4'">Action 4</el-dropdown-item>
<el-dropdown-item @click="selectedAction = 'Action 5'">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
selectedAction: 'Action 1'
}
}
}
</script>
在这个示例中,我们使用了Vue.js的数据绑定功能,将下拉框的选中值存储在selectedAction变量中,然后通过双花括号语法将其绑定到span元素上,实现文字变化。在下拉框选中项的点击事件中,我们通过改变selectedAction的值来实现文字的更新。你可以根据实际需求修改选项的值和样式
原文地址: https://www.cveoy.top/t/topic/i0el 著作权归作者所有。请勿转载和采集!