v-if见名知意，就和我们在java中的if功能类似
java中if（条件成立） {执行语句};只不过Vue中将java中的执行语句换成了标签快中的内容
在v-if中，也是类似的 v-if="条件"，如果条件为真，就执行标签快中的内容
废话不多说，直接上代码：
<html>
<head>
<meta charset="utf-8">
<title>Vue指令之v-if</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="10>2">条件成立，快快输出！</p> //10大于2 条件成立 会输出
<p v-if="10>100">条件不成立,不输出哦！</p> //10不大于100 条件不成立 不会输出
<template v-if="ok"> //ok 对应Vue的data中定义的OK
<h1>你铭记的不是纯的风景！</h1>
<p>而是站在</p>
<p>风景里抵死不认的人</p>
</template>
</div>
<script>
new Vue({
el: '#app', //作用域为ID为app的div
data: {
ok: true //Vue定义变量及赋值
}
})
</script>
</body>
</html>
输出：
v-if是不是so easy ！！！相信天才的你已经完全掌握！！！
原创不易，转载注明出处：https://blog.csdn.net/Kermit_father