要实现让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的值来实现文字的更新。你可以根据实际需求修改选项的值和样式

如何让span里的文字变为下拉框选择的数据 el-dropdown-menu el-dropdown-itemAction 1el-dropdown-item el-dropdown-itemAction 2el-dropdown-item el-dropdown-itemAction 3el-dropdown-item

原文地址: https://www.cveoy.top/t/topic/i0el 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录