code點滴

在上一篇的Todo_List完成了，編輯和刪除還有新增的功能，這次準備新增篩選的功能，有全部事項、已完成事項、未完成事項。 但在新增這些事項時發現一些問題，然後順利解決了所以就紀錄一下😀 有3個篩選的功能，所以必須多3個選取按鈕。 這裡就不多說啦就3個radio button。 直接進入怎麼篩選的程式嗎吧! <li v-for="(item,index) in filtertext" :key="item.uuid" :class="{finished:item.isFinished}"> 將原本in items改成filtertext，將要把filtertext放入computed做處理。 <input :checked="showall" :class="{show:showall}" click="show1" name="show" type="radio">全部 <input :checked="showend" :class="{show:showend}" click="show2" name="show" type="radio">已完成 <input :checked="showing" :class="{show:showing}" click="show3" name="show" type="radio">未完成 新增了3個radio button然後綁定checked這樣能獲取狀態。 computed:{ filtertext(){ if(this.showall==true){ return this.items; } if(this.showend==true){ return this.items.filt

寫Vue一陣子了，但蠻少發文的所以來介紹一點小實作，經典又簡單的todolist，有輸入、刪除、編輯、已完成的功能。 主要學習點: V-for的使用。 資料的雙向、單向綁定。 V-if的簡單使用。 事件觸發的綁定。 那就先來做個樣板吧!! <template> <div id="app"> <input/> <ul> <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}"> <span>{{item.label}}</span> </ul> </div> </template> <script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ], } } } </script> <style> .finished { text-decoration: line-through; } </style> 這樣的樣子會呈現這樣，單純的輸入與一開始的內容。 透過V-for來列出我們物件裡面的資料，並透過V-bind綁定class並與style配合劃掉已完成的事項，非常簡單就做出單純的layout。接下來我們要輸入文字並添加事項囉! <input class="addtext" @keyup.enter=&

最近開始寫專案啦~之前剛接觸Vue時因比較複雜，所以就先強迫越級直接學了Vuex，現在回來一般小案子，父子組件的溝通就簡單透過props、emit來實現吧。 一張圖代表一切(大概是這樣) 由上圖的圖片看來，一個溝通模式父元件透過 props 的方式向子元件傳送數值，而子元件要呼叫父元件是透過 e mit 的方式傳送事件( events )。 父對子(Props): 因各元件為獨立狀態，無法隨意的溝通或共享數據，並且有兄弟元件、父子元件的關係，而父元件要傳送數值給自己的子元件就是使用 props 屬性。 範例: 父組件程式碼 <template> <child :text="text1" message='I am a child.' ></child> </template> <script> import child from './child.vue'; export default { components: { child }, data () { return { text1: 'father props'; } } } <script> 子組件程式碼 <template> <div>{{text}}{{message}}</div> </template> <script> export default { props: { text:"", message:"" } } <script> 這樣就能把數值、資料傳到父組件，我們來整理一下props功能吧! 為元件中自訂屬性。 傳送數值可用陣列、物件、字串 等等。 透過父元件傳送給子元件。 警告: 千萬不能直接改props傳送過來的數值，想要直接更改父元件，這作法是不正確的。 子對父(Emit): 父對子是用Props，而子要調用