条件语句
条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件。与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。
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指令。
v-for指令需要以site in sites形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名。
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 class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>条件和循环的综合练习</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;
}
.card img {
width: 100%;
height: 100%;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.like {
color: greenyellow;
}
.no-like {
color: red;
}
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2 v-if="show">显示电影信息</h2>
<div class='container'>
<!-- 通过循环遍历movies数组 -->
<div class="card" v-for="moive in moives">
<h4>{{moive.name}}</h4>
<!-- 绑定封面属性 -->
<img :src="moive.cover">
<!-- 判断like的值 -->
<p class="like" v-if="moive.like">喜欢</p>
<p class="no-like" v-else>不喜欢</p>
</div>
</div>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el: '#app',
data: {
show: true,
moives: [
{
name: '驯龙高手3',
cover: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2546335362.webp',
like: false
},
{
name: '绿皮书',
cover: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2549177902.webp',
like: true
},
{
name: '阿丽塔：战斗天使',
cover: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544987866.webp',
like: false
},
{
name: '流浪地球',
cover: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545472803.webp',
like: true
},
]
}
})
</script>
</body>
</html>
网友评论