VueJS学习——条件渲染和列表渲染( 二 )

Click Me

这是H1标签

现在它将做的是,它将检查变量show的值,如果它是真的,将显示h1标签。单击按钮并在浏览器中查看,因为show变量的值更改为false,h1标记不会显示在浏览器中。仅在show变量为true时显示。

以下是浏览器中的显示。

我们看下浏览器中dom的变化情况

VueJS学习——条件渲染和列表渲染

变为false时,h1已经不见了

VueJS学习——条件渲染和列表渲染

下面是使用了if-else的示例

主要就是这段代码:

这是H1标签

这是H2标签

现在,如果show为true,将显示“这是H1标签”,如果为false,则显示“这是H2标签”。这是我们将在浏览器中获得的内容。

推荐阅读