您的位置:首页 > Web前端 > Vue.js

VUE指令

2021-01-10 22:17 639 查看

指令是带有 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 元素。起始就是前端的判断指令。


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: