VUE入门-常用指令

 在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令,  譬如在HTML页面中这样使用`<div v-xxx=''></div>` , 在vue中v-xxx就是vue的指令, 指令就是以数据去驱动DOM行为的,简化DOM操作

常用的指令

- v-text   不可解析html标签

- v-html    可解析html标签

- v-if    做元素的插入(append)和移除(remove)操作

- v-else-if

- v-else

- v-show   display:none 和display:block的切换

- v-for

  - 数组  item,index

  - 对象 value,key ,index

<!doctype html>
<html>
	<head>
	    <script src="vue.js"></script>
	</head>

	<body>
		<div id="app"></div>
		<script type="text/javascript">
			new Vue({
			  el:'#app',
			  template:`
			     <div>
				     <div v-text="textCmd"></div>
					 
					 <div v-html="htmlCmd"></div>
					 
					 <div v-if="num==1">num=1 condiction </div>
					 
					 <div v-if="count==1">count=1</div>
					 <div v-else-if="count==2">count=2</div>
					 <div v-else> other count.</div>
										  
					 <div v-show="isShow">show this zone</div>
					 
					 <hr />
					 <div v-for="(item, index) in forArray">
					 {{index}}, {{item}}
					 </div>
					 
					 <hr/>
					 <div v-for="(value, key) in forObject">
					 {{key}}: {{value}}
					 </div>					 
				 </div>
			  `,
			  data:function() {
				  return {
					  textCmd:"<h1>This is a text command</h1>",
					  htmlCmd:"<h1>This is a Html command</h1>",
					  num:0,
					  count:1,
					  isShow:true,
					  forArray:["tom","jack","marry","hebe"],
					  forObject:{"name":"tom", "age":20, "hobbies":"football"}
				  }
			  }
			})
		</script>		
	</body>
</html>


上一篇: VUE入门
下一篇: VUE入门-数据绑定及事件绑定
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章来源于互联网, 若有侵权, 联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布文章.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号