Element中checkbox綁定值為數字，字符串問題

開發中經常遇見后台傳0和1代替是否，男女等，在使用element中一些組件時候，數字有時候並不是很好用，例如checkbox的綁定之回顯，后台傳給你一個0和1 就很蛋疼，element文檔上也沒有實例，光是說可以綁定數字，字符串，這就很尷尬。分享一下自己遇到的問題和解決的辦法，希望幫到別人。

官網上的例子

<template>
  <!-- `checked` 為 true 或 false -->
  <el-checkbox v-model="checked">備選項</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

　　這種是默認值為true和false

當綁定值是字符串類型時候

用到文檔中這兩個屬性

 

 代碼：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<template>
  <!-- `checked` 為 true 或 false -->
  <el-checkbox :value='checked' true-label='1' false-label='0'>備選項</el-checkbox>
</template>
</div>

　結果：

 

當綁定值是數字串類型時候

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<template>
  <!-- `checked` 為 true 或 false -->
  <el-checkbox :value='checked' :true-label=1 :false-label=0>備選項</el-checkbox>
</template>
</div>

 結果：

 

爬坑不容易，整理也辛苦

如果對你有幫助，你口袋也充裕，並且你也樂意，那就請作者喝杯飲料吧