vue 小練習之 todos 土豆絲

vue-todomvc

演示效果 :

安裝依賴包 :npm i

安裝 vue :npm i vue

匯入 vue :

找到 index.html ,給 section 標籤新增乙個 id

測試 vue :

data 中隨便來乙個 msg 看能不能顯示到檢視中

todolist 陣列裡面都是物件id name done

id : (唯一標識 ) 刪除需要 name : (名稱) 展示需要done : (是否完成任務) 選中狀態需要

去掉線 ::class=""

多選框選中狀態 :v-model='item.done'

/**

* 新增任務
*/addtodo( e ) 
​                // 1. 新增任務
if (e.keycode === 13) )
//2. 清空文字框內容
this.todoname = ''
}​            }

傳 id,過濾不是 id 的

this.todolist = this.todolist.filter(item => item.id != id)

畫圖

三步 :

:class =判斷 選中的是哪乙個,是選乙個都返回true, 顯示編輯狀態

雙擊 :@dblclick="edittodo(item.id)"

在edittodo 函式裡 儲存選中的idthis.editid = id

回車 : 編輯狀態消除 : this.editid = -1

vue中資料更新的特點：只要vue中的資料發生改變，頁面中所有的指令和表示式都會被重新計算一次

記住 keycode 太麻煩了

語法 : @keyup.enter='事件函式'.enter 就是乙個按鍵修飾符,意思就是當按回車的時候,事件才會被觸發

@keyup.13 也可以,但是 keycode 也是要記住的

完善 todomvc + 按鍵修飾符**

​

異同點

v-if 和 v-show 的異同點

​1. 相同點 : 可以切換元素的顯示與隱藏
​2. 不同點 : 切換顯示和隱藏的實現不同
​    v-if :  顯示:建立節點  隱藏: 刪除節點
​    v-show : 顯示: display:block  隱藏 : display:none
​3. 使用場景 :
​    v-if因為要不斷的建立和刪除來切換顯示與隱藏 ,所以效能不高
​    v-if : 切換次數不頻繁的時候,
​        v-show : 切換次數頻繁的時候

直接寫v-show="todolist.length > 0"

封裝到乙個函式裡

元件 :v-show="isfooter()"

// **顯示

isfootershow()

3.1 只要 vue 裡的資料發生了變化, 頁面中所有的指令和表示式都會重新計算3.2 所以只要文字框裡的內容發生改變,.todoname 也會傳送改變,這裡就會不斷的列印,,效能不好3.3 我們要做的是 只要陣列列表的個數改變才會影響底部的變化, 文字不管內容文字再多都不應該影響底部的變化3.4 下面需要計算屬性

計算屬性其實就是乙個屬性

注意點 :

什麼時候使用 計算屬性?

案例 : 計算器

num1 + 

num2 = }

看官網

} data: ,
, ]}
​vm.list.unshift()

完善 todomvc + key

v-else : 兩種情況的

vue路由小demo練習

路由知識詳解位址 接著前面的demo位址繼續練習路由知識.主要完成首頁和電影無重新整理跳轉切換以及動態路由.實際就是元件之間的切換 先上效果圖 首頁 簡單表示一下 電影頁 假設有乙個電影詳情頁，詳情頁需要根據電影的id來獲取電影物件，然後渲染元件 那麼電影詳情頁的位址中就需要包含電影的id 這裡就涉...

C語言練習之陣列小練習

1.選修某課程的學生共10人，學生的資訊包括學號 班級 姓名 成績，按成績高低輸出學生名單 用選擇法排序 include include include define n 10 選修某課程的學生共10人，學生的資訊包括學號 班級 姓名 成績，按成績高低輸出學生名單 用選擇法排序 intmain fo...

VUE小練習 按鈕顏色，陣列對映

1.有紅 黃 藍三個按鈕，以及乙個200x200矩形框box,點選不同的按鈕，box的顏色會被切換成指定的顏色 解法一 我本來的思路，把三個按鈕繫結到乙個div中，然後通過dom操作，利用方法拿到當前event，把當前標籤的父標籤的background換成相應的顏色，是很笨的方法。比較冗餘，但是是我...