單選框和復(fù)選框的區(qū)別

• 單選框(Radio Button) 允許用戶從給定的選項(xiàng)中選擇一個(gè)選項(xiàng)。用戶只能選擇其中一個(gè)選型，而且一旦選擇一個(gè)選型，在沒有其他交互的情況下無法取消選擇。通常，單選框用于提供一組相關(guān)但互斥的選項(xiàng)，例如選擇性別時(shí)，男和女就是互斥的選項(xiàng)。
• 復(fù)選框(CheckBox) 允許用戶從給定的選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)。用戶可以同時(shí)選擇多個(gè)選項(xiàng)，也可以取消之前的選項(xiàng)。復(fù)選框通常用于提供一組相互獨(dú)立的選項(xiàng)，例如在購物車中選擇多個(gè)產(chǎn)品時(shí)，用戶可以同時(shí)選擇多個(gè)復(fù)選框。

注意：

• 在uniapp開發(fā)時(shí)，如果想要使用radio單選框組件設(shè)置勾選的狀態(tài)，因?yàn)閞adio組件在微信開發(fā)文檔中并沒有change事件，既然沒有可以使用最傳統(tǒng)的方式-點(diǎn)擊事件

需求：當(dāng)點(diǎn)擊radio讓當(dāng)前的狀態(tài)改變

• 首先給radio設(shè)置點(diǎn)擊事件，并使radio的當(dāng)點(diǎn)擊的時(shí)候取反

import Vue from 'vue'
import Vuex from 'vuex'

// 插件的方式來使用
Vue.use(Vuex)

// 創(chuàng)建一個(gè)store對象并暴露出去
const store= new Vuex.Store({
    state:{
        isCheck:true,
    },
    mutations:{
        updateCheck(state,isCheck){
            state.isCheck=isCheck
        }
    }
})
export default store

<view>
  <radio @click="changeCheck(isChecked)" :checked="isChecked"></radio>
</view>

<script>
   ecport default{
      computed:{
         isChecked(){
            return JSON.parse(JSON.stringfy(this.$store.state.isCheck))
     }
   },
      methods:{
       changeCheck(value){
          value=!value
          console.log(value)
      }
   }
}
</script>

注意：

• 通過打印出value發(fā)現(xiàn),isChecked的值確實(shí)在點(diǎn)擊的時(shí)候發(fā)生變化，但是在小程上當(dāng)前點(diǎn)擊的radio狀態(tài)卻沒有發(fā)生變化

思考：

是什么原因，讓radio狀態(tài)沒有發(fā)生變化？

提示：

• 計(jì)算屬性的特點(diǎn)是什么？

解答：

• 計(jì)算屬性的其中一個(gè)特點(diǎn)是：可緩存與非可緩存：計(jì)算屬性默認(rèn)是可緩存的，這意味著當(dāng)計(jì)算屬性所依賴的數(shù)據(jù)不變時(shí)，多次訪問該屬性會(huì)返回緩存的結(jié)果，而不會(huì)觸發(fā)重復(fù)計(jì)算。
• 緩存：在Vue.js中，計(jì)算屬性的緩存默認(rèn)是開啟的，只要計(jì)算屬性所依賴的數(shù)據(jù)沒有變化，多次訪問該屬性會(huì)返回緩存的結(jié)果，而不會(huì)重復(fù)計(jì)算。通俗的說就是當(dāng)?shù)谝淮稳〕鲈瓟?shù)據(jù)，會(huì)把數(shù)據(jù)放置在緩存中，將來再次訪問的時(shí)候，只要原數(shù)據(jù)沒有變，就會(huì)從緩存中去找

在上述案例中

計(jì)算屬性的作用是根據(jù)內(nèi)部依賴的數(shù)據(jù)，自動(dòng)計(jì)算出一個(gè)結(jié)果返回，但是isChecked內(nèi)部依賴的數(shù)據(jù)是從vuex深拷貝出來的數(shù)據(jù)對象，vuex數(shù)據(jù)變化了，計(jì)算屬性才會(huì)去計(jì)算

但是注意的是，在點(diǎn)擊事件changeCheck中，value！=value并沒有改變vuex中的數(shù)據(jù)，value來自isChecked，isChecked不是vuex中的數(shù)據(jù)，是通過深拷貝得到的，所以修改的是isChecked的值

只要計(jì)算屬性做了深拷貝，那么修改計(jì)算屬性中對象的屬性值，就不會(huì)影響原數(shù)據(jù)，自然也就不會(huì)觸發(fā)計(jì)算屬性的更新

• 所以要改變vuex里的數(shù)據(jù)還需要通過commit來觸發(fā)

<script>
   ecport default{
      methods:{
       changeCheck(value){
          value=!value
          console.log(value)
          this.$store.commit('updateCheck',this.isChecked)
      }
   }
}
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論