VUE指令

高薪面试题
常见面试题系列分析,前端、全栈、Java、大数据等
tea_year

 

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE指令</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<!--布局-->
		<div id="instruct">
			<p v-if="seen">VUE指令学习</p>
			<template v-if="ok">
				<h1>好好学习VUE</h1>
				<h2>前端好框架,就业不用愁</h2>
				<h3>扯淡,必须得好好练习!</h3>
			</template>
		</div>
		<!--js-->
		<script>
			new Vue({
				el:'#instruct',
				data:{
					seen:true,
					ok:false
				}
			});
		</script>
	</body>
</html>

ok设置为了false,效果如下:

 

然后设置ok为true,效果如下:

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。起始就是前端的判断指令。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读