vue 条件渲染指令

Posted _jigr

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 条件渲染指令的主要内容,如果未能解决你的问题,请参考以下文章

vue 条件渲染指令

vue 条件渲染指令

Vue指令之条件渲染

Vue基础(下):条件渲染列表渲染(key)过滤器内置和自定义指令

vue条件渲染

Vue学习之路6-条件渲染