Vue基本語法day02

2021-09-18 07:01:24 字數 1385 閱讀 1026

v-if 和 v-show 切換元素的隱藏和顯示

格式: v-if / v-show='布林值',		true  => 元素顯示,  false  => 元素就隱藏

相同點: 都可以切換元素的顯示和隱藏

不同點: 實現的方法不同

v-if : 顯示 : 建立節點,,,隱藏 : 刪除節點 通過不斷的建立和刪除節點來切換

v-show : 顯示 : display: block 隱藏 : display: none

場景 :

v-if 通過不斷的建立和刪除節點來切換顯示和隱藏的,,,(重繪重排) 所以效能不好

以後切換顯示和隱藏 不頻繁 => v-if (配合條件渲染指令一塊使用的 )

................................頻繁 => v-show

條件渲染指令

v-if

v-else-if

v-else

v-once : 只解析一次,以後不管資料怎麼變化,都不會再變

v-pre : 不解析(是什麼樣還是什麼樣)

//   }
遮蓋 v-cloak

解決閃爍問題

} ===> 1000

1. 給要遮蓋的元素新增 v-cloak 指令

2. 通過屬性選擇器,找到新增指令的所有的元素,設定樣式 display: none

3. 當解析完成,vue會刪除 v-clock 指令

注意點 : 如果子元素需要遮蓋的比較多,給其父元素新增 v-cloak

[v-cloak] }

計算屬性 : (computed, 跟data 平級) 計算屬性也是一種屬性, 只跟相關的資料變化而變化

使用: 

1. 計算屬性寫在 computed 裡面

2. 寫起來像方法

3. 用起來像屬性

特點: 1. 計算屬性 必須要有乙個 return 值,return 後面的值,就是計算屬性得到的值

2. 計算屬性裡面可以使用 data 已存在的值

3. (重點) 計算屬性會隨著相關的資料(num1) 的變化,而重新計算

計算屬性 num , 它的相關資料 是 num1 , 所以只要num1 發生了變化,計算屬性就重新計算

注意點:

1. 一定要有 return

2. 計算屬性不能當 函式 / 方法來用

3. 計算屬性不能和data 裡的資料重名

以後什麼情況下使用計算屬性?

1. 根據已知值 (data裡的值) 得到是乙個新值

2. 新值只會隨著其相關的資料變化而變化

Oracle基本語法學習記錄(Day02)

記錄 資料庫鏈結 select abs 14 as 絕對值 from dual dual是一張虛擬表 lower 將字串轉換為小寫 select lower helloworld as 轉小寫 from dual upper 將字串變為大寫 select upper abcdefg as 轉大寫 f...

Vue學習筆記day02總結

目錄 1.品牌新增 刪除 查詢案例 2.過濾器 2.1全域性過濾器 2.2私有過濾器 3.字串的padstart方法的使用 指定顯示長度 4.自定義全域性按鍵修飾符 5.自定義指令 5.1自定義全域性指令 5.1.1 自定義全域性指令讓文字框獲取焦點 5.1.2 自定義全域性指令設定字型顏色 使用鉤...

DAY 02基本資料型別

複習 變數 一種控制計算機儲存資料的機制。ps 變數值是我們存的資料,存到記憶體裡 常量 不可以被改變的量 python中一般大寫 如 age 18約定為常量 1.number 數字型別 1 整形 int 定義 age 18 age age 1 作用 記錄個數 年齡 日期 等級 2 浮點形 floa...