001_XXXX(h3)
什么是指令
- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
- 指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 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
-
源代码
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="../js/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 ========================================-->
<button v-if='checkvif'>测试v-if</button>
<!--测试v-if v-else-if v-else ========================================-->
<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='(oj,key,index) in ojfor'>
{{key}}:{{oj}}:{{index}}
</li>
</ul>
</div>
`,
data:function(){
return {
<!--测试v-text ========================================-->
mytext:'<h1>我这里是v-text</h1>',
<!--测试v-html ========================================-->
myhtml:'<h1>我这里是v-html</h1>',
<!--测试v-if ========================================-->
checkvif:true,
<!--测试v-if v-else-if v-else ========================================-->
num:6,
<!--测试v-show ========================================-->
checkshow:true,
<!--循环数组 ========================================-->
arrayfor:['篮球','足球','乒乓球'],
<!--循环对象 ========================================-->
ojfor:{play:'篮球',people:'ming',age:'19'}
}
}
})
</script>
</body>
</html>
- 浏览器界面
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
