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
转载于简书作者陶然然_niit
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>
循环举例：
<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>v-bind练习</title>
<!-- 通过cdn引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.container {
display: flex;
width: 90%;
margin: 0 auto;
}
.top {
display: flex;
width: 90%;
margin: 0 auto;
align-items: center;
justify-content: space-between;
/* 子元水平方向两端对齐 (一左一右) */
}
.card {
width: 300px;
height: 400px;
margin-right: 30px;
border: 1px solid #EEEEEE;
border-radius: 10px;
}
.card img {
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.logo {
display: flex;
justify-content: space-between;
}
.left{
display: flex;
}
.logo img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.des {
font-weight: 100;
}
.desc {
margin-left: 10px;
font-weight: 100;
}
.number {
float: right;
color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<h3>进行中的班课</h3>
<h3>4个进行中的班课</h3>
</div>
<hr>
<div class="container">
<!-- 通过循环遍历books数组 -->
<div class="card" v-for="book in books">
<!-- 绑定班课的封面属性 -->
<img :src="book.cover">
<!-- 显示班课名称 -->
<div class="information">
<p>{{book.grade}}</p>
<p class="des">{{book.classes}}</p>
</div>
<div class="logo">
<div class="left">
<img :src="book.avatar">
<p class="desc">{{book.name}}</p>
</div>
<div class="right">
<p v-if="book.number" class="number">487656</p>
<p v-else></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//实例化一个vue对象
var app = new Vue({
el: '#app',
data: {
show: true,
books: [
{
id:'487964',
cover: '../img/Vue.jpg',
grade: '软件1721',
classes: 'Web前端框架技术',
avatar: '../img/x.jpg',
name: '许莫琪',
number: false
},
{
id:'487852',
cover: '../img/spring5.jpg',
grade: '软件1721',
classes: '轻量级框架技术',
avatar: '../img/x.jpg',
name: '许莫琪',
number: false
},
{
id:'984964',
cover: '../img/Java.png',
grade: '软件1721',
classes: 'Web应用开发',
avatar: '../img/wp.png',
name: '王萍',
number: false
},
{
id:'764294',
cover: '../img/book.jpg',
grade: 'my friend',
classes: '105学习',
avatar: '../img/w.jpg',
name: '吴飞',
number: true
}
]
}
})
</script>
</body>
</html>
image.png
网友评论