一、v-if指令

1.v-if渲染

  • 可以使用 v-if 指令根据判断条件,动态地决定是否要渲染某一块元素。
  • v-if 判断条件可以是任何有效的JS表达式;
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div>
Now you don't
</div>
  • v-if 可以结合 v-else、v-else-if 指令使用,实现更复杂的条件判断。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

2.v-if和v-for结合使用

  • 当 v-if 和 v-for 同时使用于同一个元素时,v-for 具有更高的优先级;这意味着 v-if 将分别重复运行于每个 v-for 循环中。
  • 若欲保证 v-if 优先于 v-for 运行,可以在 v-if 中嵌套包含 v-for。
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

二、v-show指令

1.v-show渲染

  • v-show 指令:根据条件的不同,决定是否显示元素
  • v-show 只是简单地切换元素的 CSS 属性 display ,从而实现元素的显示或隐藏
  • v-show会始终在DOM结构中生成元素,只是元素可能不显示
  • v-if会根据条件决定是否生成DOM元素,与v-show不同
<div>
v-if指令:<span v-if="isshow">v-if指令</span>
</div>
<div>
v-show指令:<span v-if="isshow">v-show指令</span>
</div>


三、条件渲染(HTML代码)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件渲染</title>
</head>
<body>
<div id="app">
<div>
<h4>判断是否处于登录状态</h4>
<div v-if="isLogined == true">
欢迎您,张三!
</div>
<div v-else>
<a href="#">登录</a>
</div>
</div>
<div>
<h4>用户列表</h4>
<!-- template表示一个整体,表示一个模板,没有实际意义,仅仅是为了把内部内容当成一个整体来处理 -->
<template v-if="users.length > 1">
<ul>
<li v-for="u in users" v-if="u.age > 18">{{u.name}} -- {{u.age}}</li>
</ul>
</template>
</div>
<div>
<h4>v-show渲染</h4>
<div v-show="isLogined == true">
v-show内容
</div>
<h4>v-if渲染</h4>
<div v-if="isLogined == true">
v-if内容
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isLogined: false,
users: [
{ name: 'u1', age: 18 },
{ name: 'u2', age: 22 }
]
}
});
</script>
</body>
</html>

一定要引入Vue.js​点击链接下载开发版或生产版本在html中引入即​