概述
在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>
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:`
<div>
<!--测试v-text-->
<div v-text='mytext'></div>
</hr>
<!--测试v-html-->
<div v-html='myhtml'></div>
<!--测试v-if v-else-if v-else-->
<button v-if='checkvif'>测试v-if2</button>
<button v-if='num==1'>测试v-if</button>
<button v-else-if='num==2'>测试v-else-if</button>
<button v-else>测试v-else</button>
<!--测试v-show-->
<div v-show='checkshow'>我是V-SHOW</div>
<!--循环数组-->
<ul>
<li v-for='(item,index) in arrayfor'>
{{ item }}-{{index}}
</li>
</ul>
<!--循环数组-->
<ul>
<li v-for='item in arrayfor2'>
{{ item }}
</li>
</ul>
<!--循环对象-->
<ul>
<li v-for='(oj,key) in ojfor'>
{{key}}:{{oj}}
</li>
</ul>
</div>
`,
data:function(){
return {
mytext:'<h1>我这里是v-text</h1>',
myhtml:'<h1>我这里是v-html</h1>',
checkvif:true,
num:6,
checkshow:true,
arrayfor:['篮球','足球','乒乓球'],
arrayfor2:['篮球','足球','乒乓球'],
ojfor:{play:'篮球',people:'ming',age:'19'}
}
}
})
</script>
</body>
</html>