vue 条件渲染指令
Posted //我是小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 条件渲染指令相关的知识，希望对你有一定的参考价值。
vue中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。
案例1 v-if
通过v-if来实现登录页面和注册界面的切换
html：
<body>
<div id="box">
<h1>用户注册\\登录</h1>
<input type="checkbox" v-model="iszc" />注册
<div class="show">
<div v-if="iszc">
<h4>用户注册</h4>
<p>id:<input type="text" /></p>
<p>pwd:<input type="password" /></p>
<p>okpwd:<input type="password" /></p>
<input type="button" value="注册" />
</div>
<div v-else>
<h4>用户登录</h4>
<p>id:<input type="text" /></p>
<p>pwd:<input type="password" /></p>
<input type="button" value="登录" />
</div>
</div>
</div>
</body>
js:
<script type="text/javascript">
var ve=new Vue({
el:"#box",
data:{
iszc:false
}
})
</script>
案例1 v-show
通过v-show来实现程序员冬夏季上班时间的切换
html:
<body>
<div id="box">
<h1>程序员作息时间表</h1>
<input type="checkbox" v-model="is" />夏天
<div class="show">
<div v-show="is">
<!-- 夏天 -->
<span>8:00-18:00</span>
</div>
<div v-show="!is">
<!-- 冬天 -->
<span>9:00-18:30</span>
</div>
</div>
</div>
</body>
js:
<script type="text/javascript">
var ve=new Vue({
el:"#box",
data:{
is:true
}
})
</script>
以上是关于vue 条件渲染指令的主要内容，如果未能解决你的问题，请参考以下文章