uniapp双向绑定switch开关选择器

uni中switch的checked属性只会在页面初始加载时有效，后来在手动修改时，并不更新视图。可以借鉴vue中的this.$set思想，将checked属性绑定的值封装成对象。

HTML：
<switch class="section-right" :checked="treatmentStatu.checked" @change="switchChange"/>
js：
data () {
return {
treatmentStatu: { checked: false },
}
methods: {
switchChange (e) {
let value = e.target.value
let that = this
this.$set(this.treatmentStatu, 'checked', value)
// 将点击改变的状态赋给treatmentStatu.checked
if (value && !this.havePromise) {
uni.showModal({
title: '提示',
content: '您还没设置接诊承诺，是否前往设置',
success: function (res) {
if (res.confirm) {
that.$emit('changePage', 1)
console.log('用户点击确定')
} else if (res.cancel) {
that.$set(that.treatmentStatu, 'checked', false)
// 手动修改switch的状态，视图会同步更新
console.log('用户点击取消');
}
}
});
}
},

最后

以上就是忧心天空为你收集整理的uniapp双向绑定switch开关选择器的全部内容，希望文章能够帮你解决uniapp双向绑定switch开关选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。