button實現(xiàn)radiobutton功能的vue

第一次用手機來記錄 第一天不能爽約。今天的主要任務是實現(xiàn)了radiobutton的功能,雖然不多 但也算是個小小的功能 記錄一下吧。

  1. 剛開始第一部是學組件是如何使用的,主要知道的vue的父子組件之間數(shù)據(jù)傳遞的關系。一般默認的是單向數(shù)據(jù)綁定 即父組件向子組件傳遞數(shù)據(jù) 通過props進行傳遞。若想要子組件向父組件傳遞數(shù)據(jù) 要使用.sysc綁定時進行聲明。還有.once聲明是一次綁定 還沒有用過。
  2. 構思要實現(xiàn)radiobutton其實就是將選中的添加一個class,將不選的都移除。這是一開始的思路,然后使用input button,為它還加入了id 和name屬性 目地是使用id獲得當前選中的 使用name將這一類中未選中的移除class。但覺得這種方法不夠vue
  3. 就是將class的綁定使用 index==$index 使用v-for中的index來實現(xiàn) 這樣根本不用添加移除class,直接通過判斷就可以來綁定
  4. 對于數(shù)量不定的按鈕 使用一個數(shù)組對象傳遞進去 然后v-for來實現(xiàn)。對于數(shù)組對象 里面要有button的值和對應數(shù)據(jù)庫中的值。
  5. 對于選中的值傳給父組件,就用了.sysc的雙向綁定。
  6. 大體就遇到這么幾個問題 先這樣吧 這也算寫了筆記了吧 要堅持記錄自己的學習哈
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,908評論 18 139
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,096評論 4 129
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關于...
    云之外閱讀 5,079評論 0 29
  • sptarg.1用室友的睡眠和美夢作為獻祭,開始了征程。 sptarg.2坐上了第二次元真空通道。 sptarg....
    李汪汪汪俠閱讀 157評論 2 1
  • 1 前些時間看微信朋友圈,赫然發(fā)現(xiàn)被自認為好閨蜜的A拉黑了。愕然,然后反思:我到底哪里得罪她了? 我們從13、4歲...
    小靈珊a閱讀 263評論 8 4