Vue指令
在上篇文章《 Vue入门 文本输出》中介绍的 v-text 和 v-html 是Vue指令中的其中两个,接下来继续学习Vue的其他指令。
一 文本显示隐藏
1. v-show
<div id="app">
<div v-show="isShow">The example of "v-show"</div>
<div v-if="isIf">The example of "v-if"</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// isShow: true
isShow: false,
isIf: false
}
})
</script>
2. v-if v-else(条件语句)
<div id="app">
<div v-if="isIf">The example of "v-if"</div>
<div v-else>"v-if" is "false" then "v-else" showed</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isIf: true
}
})
</script>
v-if 为 true时,运行结果:
v-if 为 flase时,运行结果:
v-show 和 v-if 用于显示 DOM 是否显示。但是两者有以下区别:
v-show 相当于 display,v-show 设置为 false 相当于display: none; 元素仍然存在只是隐藏了,可用于页面中需要多次切换的情况;
v-if 相当于 remove,v-if 设置为 false 就是将元素删除不存在了,可用于页面中只需要切换一次的情况,如引导操作。
二 循环
3. v-for
(1) 循环普通数组
定义普通数组后在html中用v-for指令渲染。
<div id="app">
<!-- :key ="index"是v-bind:key ="index"的简写 -->
<p v-for="(item,index) in arr" :key ="index">
索引:{
{index}} --> 值:{
{item}}
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: [1,2,3,4,5]
}
})
</script>
运行结果:
(2) 循环对象数组
<p v-for="(user,index) in arrObj" :key="index">
序号:{
{user.id}} --> 姓名:{
{user.name}}
</p>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: [1,2,3,4,5],
arrObj: [