如何使用VUE.js定义已选中和未选中复选框的值？

Question

有没有一种方法可以定义。的选中和未选中值？现在VUE将模型设置为true / false，这很有意义，但是在实际应用中，数据格式有点像'1'=> true和''=> false。如何在VUE中做到这一点？

Answer 1

您可以使用true-value和false-value：

https://vuejs.org/v2/guide/forms.html#Checkbox-1

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'

Answer 2

不确定您到底需要什么，但是，正如您所说，如果您这样做：

{{ boxtest }}

<input type="checkbox" v-model="boxtest"/>

当您选中或取消选中该框时，Boxtest 将显示为“true”或“false”。

如果您确实需要转换它，您可以执行以下操作：

{{ boxtest ? 1 : '' }}