Vue学习 - :xxx=“变量“

最新推荐文章于 2024-05-13 21:04:39 发布

原创最新推荐文章于 2024-05-13 21:04:39 发布

· 603 阅读

1 ·

版权

文章标签：

#vue.js

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文通过一个具体的Vue下拉框例子，探讨了在`:label`前添加冒号导致的问题。当在`el-option`的`label`属性前加上冒号时，Vue将其视为一个变量，但在实际业务逻辑中未定义，导致下拉框显示value值而非预期的label文字。分析指出，冒号在Vue中代表双向绑定，意味着组件属性的值会根据业务逻辑变化。总结强调了Vue中属性修饰符的重要性和正确使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、:xxx="变量"问题描述

以下拉框为例解释:

<el-col :span="9">
   <el-form-item label="状态:">
      <el-select v-model="formInline.osiStatus" placeholder="请选择">
          <el-option value="1" label="正常">正常</el-option>
          <el-option value="2" label="异常">异常</el-option>
          <el-option value="3" label="隐患">隐患</el-option>
     </el-select>
   </el-form-item>
</el-col>

选择【下拉框选项时】显示的是正常、异常、隐患
在这里插入图片描述

<el-col :span="9">
   <el-form-item label="状态:">
      <el-select v-model="formInline.osiStatus" placeholder="请选择">
          <el-option value="1" :label="正常">正常</el-option>
          <el-option value="2" :label="异常">异常</el-option>
          <el-option value="3" :label="隐患">隐患</el-option>
     </el-select>
   </el-form-item>
</el-col>