VUE指令

举报
tea_year 发表于 2021/12/30 00:12:40 2021/12/30
1.4k+ 0 0
【摘要】   指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>VUE指令</title...

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

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/85679982

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。