三种条件渲染指令：v-if （真正的条件渲染，适合条件不经常变更的场景）、v-else-if 、v-else
v-show:适用于频繁的切换条件
列表渲染指令：v-for（用于数组的遍历）
v-if举例
<div id = "app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
status:1
}
})
</script>
v-show举例
<div id = "app">
<p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
status:2
}
})
</script>
v-for举例
<div id = "app">
<ul>
<li v-for="book in books">
{{book.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
books:[
{ name : 'Vue.js'},
{ name : 'JavaScript'},
{ name : 'HTML5+CSS3'},
]
}
})
</script>
条件与循环的综合练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js条件和循环的综合练习</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.container{
display: flex;
width: 80%;
margin: 0 auto;
}
.card{
width: 200px;
height: 200px;
margin-right: 30px;
border: 1px solid #EEE;
border-radius: 10px;
text-align: center;
}
.card img{
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.like{
color:aquamarine;
font-weight: bold;
}
.nolike{
color: coral;
}
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2 v-if="show">显示图书信息</h2>
<div class="container">
<!-- 通过循环遍历books数组 -->
<div class="card"v-for="book in books">
<!-- 显示图书的名字 -->
<h4>{{book.name}}</h4>
<!-- 绑定图书的封面属性 -->
<img :src="book.cover" />
<!-- 判定like的值，显示不同的文字 -->
<p class="like" v-if="book.like" >喜欢</p>
<p class="nolike" v-else >不喜欢</p>
</div>
</div>
</div>
<script type="text/javascript">
/* 实例化一个Vue对象 */
var app = new Vue({
el: '#app',
data: {
show:true,
books:[
{
name:'Austor',
cover:'img/book1.jpg',
like:true
},
{
name:'鬼作家',
cover:'img/book2.jpg',
like:false
},
{
name:'推理竞技场',
cover:'img/book3.jpg',
like:false
},
{
name:'人鼠之间',
cover:'img/book4.jpg',
like:true
}
]
}
})
</script>
</body>
</html>
-
运行结果
运行结果.png
- 注：此文章模仿自https://www.jianshu.com/p/9b17c0c0ab14
网友评论