Vue项目踩坑：el-switch等用1，0绑定无法渲染的问题

最新推荐文章于 2025-02-16 15:37:16 发布

原创最新推荐文章于 2025-02-16 15:37:16 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #elementui

本文通过一个具体的例子展示了在Vue中，使用`v-model`绑定属性时，为何需要在活性值和非活性值前加上冒号。错误的写法导致属性绑定失效，而正确的写法为`:active-value`和`:inactive-value`，强调了在Vue中指令绑定需要使用冒号以区分属性绑定。

错误写法：

<el-form-item label="设备状态" prop="state">
    <el-switch v-model="editForm.state"
               active-value="1"
               inactive-value="0"></el-switch>
</el-form-item>

正确写法：

<el-form-item label="设备状态" prop="state">
  <el-switch v-model="editForm.state"
            :active-value="1"
            :inactive-value="0"></el-switch>
</el-form-item>