v-if 还有 v-show 这两个指令，都可以根据某个值的真假动态的显示元素 .. 我这里有个 message ，现在我把它绑定到一个地方显示出来 ... 先添加点结构元素 ... 一个 div ，加上几个类 ... 一组 p 标签，里面绑定显示一个 message 表示的内容 ...

显示的就是一个带边框的文字 ... 现在我想让整个元素根据一个值动态的显示 .. 在这个包装元素的上面，添加一个 v-if 指令 ... 它的值是 loggedIn ... 意思就是，如果 loggedIn 的值是 true 的话，就渲染这个元素 ..

在应用里添加一个这样的数据 .. 先让它等于 true ... 回到浏览器 .. 页面上仍然会显示这个带边框的 hello .. 在控制台上我们可以设置一下 loggedIn 的值，让它等于 false ... 你会发现，显示的元素就不见了 .. 也就是使用了 v-if 指令的这个元素现在不会被渲染 ...

跟 v-if 相似的还有一个 v-show 指令，把 v-if 换成 v-show .. 设置一下 loggedIn 的值，让它等于 flase ... 不太一样的是，这个指令会在元素上应用一个隐藏元素的样式，就是这个 display: none ... v-if 会让整个元素不出现 ...

还有一个 v-else .. 可以在上面这个元素不渲染情况下渲染应用了 v-else 指令的元素 ... 先把 v-show 换成 v-if ...

然后再添加一个 div ui.yellow.segment .. 一组 p 标签，包装点静态的文字 ..

然后在这个 div 上面添加一个 v-else 指令 ...

现在页面上显示的是这个 hello ，因为 loggedIn 这个数据是 true ... 再把它设置成 false ... 你会发现，现在显示的是应用了 v-else 指令的元素里的内容 ...