帶有 v- 前綴的特殊屬性
v-show 控制切換一個元素的顯示和隱藏
- 語法：
v-show = " 表達式 " - 根據(jù)表達式的結(jié)果真假，確定是否顯示當(dāng)前元素
- 隱藏的本質(zhì)是
display : none
v-if 控制元素顯示或者移除
- 語法：
v-if = " 表達式 " - true : 顯示 -------- false : 移除
- 移除的本質(zhì)是 不渲染元素的代碼
v-if與v-show使用場景：
- v-if切換消耗比較高（多次創(chuàng)建、銷毀）
- v-show初始消耗比較高 （切換頻繁時使用）
v-else
- 與 v-if. v-else-if 配合使用
v-else-if
<input type="text" v-model="score"/>
<p v-if="score>=90">優(yōu)秀</p>
<p v-else-if="score>=75">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
v-on 為HTML元素綁定事件監(jiān)聽
- 語法：
v-on：事件名稱 = " 函數(shù)名稱( ) " - 簡寫：
@事件名= " 函數(shù)名稱( ) " - 函數(shù)定義在 Vue 實例的methods配置項中
v-model 必須綁定在表單元素上，將輸入同步到視圖上
- 語法：
v-model= " 變量 " - 使用在
type:checkbox上時 ： v-model與布爾值綁定， true 為選擇， fslae 為取消選擇 。
v-for 遍歷數(shù)據(jù)，并在頁面進行數(shù)據(jù)展示
- 語法：
- v-for = " (item，index) in arr "
- v-for="(val，key) in object"
- v-for="(val，key，index) in object"
- item 表示每次遍歷得到的元素
- index 表示item的索引值，可選參數(shù)
- 字符串和數(shù)字也可以遍歷，會被拆分
v-bind 綁定HTML元素的屬性
語法：
v-bind : 屬性名 = " 表達式 "-
綁定屬性
- 一個屬性：
<img v-bind:src= " myUrl " /> - 多個屬性：
<img v-bind= "{ src : myUrl , title : msg } " />
- 一個屬性：
-
綁定樣式：
-
:class="index==selected?'active':'' "-----表達式 - 一個樣式 ：
:class="{classA:條件}"----- json語法 - 多個樣式 ：
:class="[classA , classB]"----- 數(shù)組語法
-
-
綁定style：
-
:style="{fontSize:size+'px'}"----- json語法 -
:style="[styleObjectA , styleObjectB]"----- 數(shù)組語法
-
-
image.png
- 當(dāng) item.bol 為 true 時添加 .Red 這個類名
- 當(dāng) item.bol 為 false 時不添加 .Red 這個類名
v-text 更新元素的textContent
- 語法：
v-text = " 變量 " - 相當(dāng)于innerHTML,會替換掉元素中的所有文本
v-html 插入一些標(biāo)簽內(nèi)容
- !!!慎用
v-cloak 隱藏直到數(shù)據(jù)加載完成
- 語法：給視圖容器標(biāo)簽加上v-cloak屬性
- style中加上
display:none
<style>
[v-cloak]{display: none;}
</style>
<body>
<div id="box" v-cloak> <div>
</body>
