条件渲染指令
v-if
v-if主要用来控制代码的显示或隐藏条件值为true,代码显示(代码生效),为false时,代码隐藏(代码无效)
<div id="app">
<p v-if="msg">msg</p>
<p v-if="info">info</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
msg:false,
info:true,
},
})
</script>
结果
v-else和v-else-if
v-else 指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”,可以链式地使用多次。
三者的关系相当于javase中的 if、 else 、 和 else if
可以用来不需要页面跳转就实现页面跳转的效果
<div id="app">
<div v-if="page=='login'">这里是登录页面</div>
<div v-else-if="page=='register'">这里是注册页面</div>
<div v-else >这里是啥也不是</div>
<div id="butgroup">
<button type="button" @click="goto('login')">去登陆</button>
<button type="button" @click="goto('register')">去注册</button>
<button type="button" @click="goto('other')">哪也不去</button>
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
page:'login'
},
methods:{
goto(msg){
this.page=msg
}
}
})
</script>
结果
可以通过点击按钮控制显示的页面内容
循环指令
对象的遍历
v-for
<div id="app">
<div v-for="(value, key,index) in object"> <!-- value值是必须有的,当只遍历value值时 写为<div v-for="value in object"> -->
{{ index }} : {{ key }} : {{ value }} <!-- 当只遍历value值时 写为 {{ value }} -->
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
数组的遍历
<div id="app">
<div v-for="(item, index) in items"> <!-- 当不需要遍历出下标时,写为 <div v-for="item in items"> item是必须要遍历的,如果需要遍历下标,需要将 index写在item后面:v-for="(item, index) in items"-->
{{index}}:{{item}}
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
items: ['apple', 'tomato', 'banana', 'watermelon']
}
})
</script>
对象数组的遍历
<div id="app">
<div v-for="(item, index) in objects"><!--item 为必须写的值 代表的是一个对象 通过item.可以遍历对象内的属性-->
{{index}}:{{item.firstName}}:{{item.lastName}}:{{item.age}}<!--通过 item. 可以遍历对象内对应的属性-->
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
objects: [
{
firstName: 'John',
lastName: 'Doe',
age: 30
},
{
firstName: 'tom',
lastName: 'Jerry',
age: 19
}
]
}
})
</script>