Vue.js常用指令彙總(v-if、v-for等)
阿新 • • 發佈:2019-02-17
有時候指令太多會造成記錯、記混的問題,所以本文在記憶的時候會採用穿插記憶的方式,交叉比對,不易出錯。
本文主要講了一下六個指令:
v-if//v-show//v-else//v-for//v-bind//v-on
1. v-if 條件渲染指令,根據其後表示式的bool值進行判斷是否渲染該元素;
eg:
HTML:
?1 2 3 4 5 6 |
< div
id = "example01" >
< p
v-if = "male" >Male</ p >
< p
v-if = "female" >Female</ p >
< p
v-if="age>25">Age:{{age}}</ p >
< p
v-if="name.indexOf('lin')>0">Name:{{name}}</ p >
</ div >
|
JS:
?1 2 3 4 5 6 7 8 9 |
var
vm= new
Vue({
el: "#example01" ,
data:{
male: true ,
female:
false ,
age:29,
name: 'colin'
}
|