1、v-if v-else-if v-else
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<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 src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status:1
}
});
</script>
</body>
</html>
一次处理多个元素，使用template + v-if
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<template v-if="status === 1">
<p>一段文本</p>
<p>一段文本</p>
<p>一段文本</p>
</template>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status: 1
}
});
</script>
</body>
</html>
2、v-show
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<p v-show="status">一段文本</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status: false
}
});
</script>
</body>
</html>
v-show控制的是display，同时不能在template上使用。
v-if与v-show的使用建议：
v-if适合条件不经常改变的场景，因为它的切换开销大。
v-show适用于频繁切换的场景
3、v-for
v-for可以使用template，对多个元素进行渲染。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
</script>
</body>
</html>
v-for="book in books" 也可以是使用of代替in，of更接近js语法。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
