VUE入门-常用指令
By：Roy.LiuLast updated：2020-09-16
在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>From：一号门
Previous:VUE入门
Next:VUE入门-数据绑定及事件绑定
COMMENTS