Vue常用指令及使用

指令是以資料去驅動dom行為，簡化dom操作。常用指令如下

v-text innertext，不能解析文字中的html標籤

v-html innerhtml，可解析文字中的html標籤

v-show控制元素的顯示、隱藏

v-if、v-else-if、v-else滿足條件才顯示對應的元素

v-for遍歷陣列、物件

v-bind單向資料繫結

v-model雙向資料繫結

v-on事件繫結

demo v-text、v-html、v-show

"div1"

>
<
/div>
"div2"
>
<
/div>
"div3"
>
<
/div>
newvue(}
'            data:
function()
}});
newvue(}
});new
vue(}}
);<
/script>

>

"score>80"
>優秀<
/p>
else-if
="score>60"
>及格<
/p>
else
>不及格<
/p>
<
/div>
newvue(}
});<
/script>

new vue()中，template、data均可選。

所謂template 模板，就是內容的模板，內容（包括指令）可以寫在元素裡、也可以寫在template裡

>姓名：

}<
/div>
<
!--直接寫在元素裡--
>
>
<
/div>
newvue(}
});new
vue(}'
,//寫在template裡
data:
function()
}});
<
/script>

return 返回的是乙個物件。

data的2種寫法

data:

function()
},data()
},

demo v-for 遍歷陣列、物件

>

for=
"(item,index) in array"
>第
}項：}
<
/li>
<
!-- index從0開始。乙個元素填充乙個li --
>
<
/ul>
>
for=
"(key,value) in object"
>}：}
<
/li>
<
!-- item、index、array、key、value、object都是變數，可以自己指定，不是固定的 --
>
<
/ul>
newvue(}
});new
vue(
//物件}}
});<
/script>

>

<
/div>
>
<
/div>
newvue(}
',  
data:
function()
}});
newvue(}
',data:
function()
}});
<
/script>

v-bind|model與繫結時，是與的value繫結。

demo v-on 事件繫結

>

<
/div>
>
<
/div>
newvue(}'
,              data:
function()
}});
newvue(}'
,              data:
function()
},methods:
// 可以寫多個方法，逗號分隔}}
);<
/script>

>

<
/div>
newvue(}
});<
/script>

Vue常用指令及介紹

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。new vue v show 根據表示式的真假值來顯示和隱藏元素 vs temp 如懿傳 p ok 還珠格格 p d...

vue常用指令及原理

1 v if 判斷表示式是否為真，如果為真則插入dom。v show 則是通過控制css樣式來控制是否顯示。如果要顯示的元素中含有，使用 v show 可以在顯示之前提前載入，當值為 true 時就顯示。使用 v if 時會直到顯示時才開始載入。2 v for 指令可以用來遍歷乙個陣列或物件 對於陣...

Vue常用的指令及用法

v if 判斷是否隱藏 list.lenght 0 v if div else v else div v for 資料迴圈 item代表是迴圈的值 index代表是每一項 也可以說是下標 key 代表標識 for item,index in list key index p div v bind c...