创建一个if.html页面并引入vue.js代码，详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
Vue条件指令
先在body里面写个div，id为app，然后在div标签里面再写一个div，div里面写入一行字符串
再写个script标签，在标签中var app = new Vue({});中括号里面就写声明的元素、数据等
data{
flag:true
}
表示显示，然后在第二个div里面用v-if指令进行判断，默认是显示的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-if：是vue中的判断指令-->
<div v-if="flag">hello liqinggang</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
运行效果如下
image.png
在控制台的Console下输入app.flag=false按回车，效果如下
image.png
image.png
还可以把v-if改成v-show，v-show也是显示的意思，只不过为false的时候，是用了display:none隐藏掉了
<div id="app">
<!--v-if：是vue中的判断指令-->
<div v-show="flag">hello liqinggang</div>
</div>
当app.show为false时，页面上的liqinggang字符串也会隐藏掉，但不是去除掉，而是用style="display:none;"隐藏掉，如下图
image.png
