<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>条件渲染指令（二）</title>
</head>
<body>
<!--v-show 的用法与 v-if基本一致， 只不过v-show是改变元素的CSS属性display。
当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联
样式 dispaly:none;-->
<div id="app">
<p v-show="status === 1 ">当status 为 1 时显示改行</p>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
status:2
}
})
</script>
</body>
</html>
渲染后的结果
<!--渲染后的结果-->
<p style="display: none;">当status 为 1 时显示改行</p>
v-show.png
v-show 不能在 <template> 上使用。
网友评论