vue的v-if用法的图解说明

Vue提供了v-if和v-else的语法进行判断，可以通过v-if和v-else显示和隐藏内容。下面将使用v-if和v-else显示和隐藏数据

1.创建一个新的html页面，然后创建一个div并将id设置为app，然后在这个div中创建两个div，并为这两个div设置不同的文本。

代码：

Div id='app'div标志为真时显示/div标志为假时显示/div/div

2.引入vue.js在body的结束标记之前引入vue.js文件。

3.创建vue挂载点。在vue.js导入文件后面创建一个新的sctipt标记，然后使用new Vue()创建一个挂载点。

代码：

script var app=new Vue({ El : ' # app ' })/script

为v-if和v-esle判断添加虚假数据。使用vue提供的数据将flage的值设置为true。

代码：

data: { flage:true }

5.保存html后，用浏览器打开，可以看到v-if设置为true的数据。

6.回到html代码页面，将flage改为false，保存后刷新页面，会看到显示的内容是v-else。