Vue学习笔记二：常用指令
程序员文章站
2022-05-13 11:06:06
...
Vue学习笔记二：常用指令
Vue版本：2.5.21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- 1.什么是指令？
*在vue中提供一些页面+数据的更为方便的操作，这些操作就叫做指令。
譬如在页面中这样使用<div v-xxx=''></div>
*在vue中v-xxx就是vue的指令
*指令就是以数据去驱动DOM行为的，简化DOM操作
2.常见指令有哪些及怎么使用这些指令
v-text:不可解析html标签，仅仅插入文本
v-html：可解析html标签，作为标签使用
v-if：做元素的插入（append）和移除（remove）操作
可以在data中定义一个值进行判断
v-else-if:
v-else
v-show display：none和display：block的切换
可以在data中定义，如果是true显示，如果是false隐藏
v-for:可以传参
数组item（对象），index（索引）
对象value（值）,key（键），index（索引）
-->
<script>
new Vue({
el:"#app",
template:`
<div>
// v-text:不可解析html标签，仅仅插入文本
<div v-text='mytext'></div>
// v-html：可解析html标签，作为标签使用
<hr>
<div v-html="myhtml"></div>
// v-if：做元素的插入（append）和移除（remove）操作
可以在data中定义一个值进行判断
v-else-if:
v-else
<hr>
<button v-if="checkvif">v-if</button>
<hr>
<button v-if="num==1">v-if</button>
<button v-else-if="num==2">测试v-else-if</button>
<button v-else="num">测试v-else</button>
// v-show display：none和display：block的切换
可以在data中定义，
如果是true显示，如果是false隐藏
<hr>
<div v-show="vshow">我是v-show</div>
// v-for:可以传参
数组item（对象），index（索引）
对象value（值）,key（键），index（索引）
<hr>
<ul v-for="(item,index) in arrayfor">
<li>{{item}}-{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(ob,key) in ojfor">{{key}}-{{ob}}</li>
</ul>
</div>`,
data:function(){
return {
mytext:"<h1>我这里是v-text</h1>",
myhtml:"<h1>我这里是v-html</h1>",
checkvif:true,
num:2,
vshow:true,
arrayfor:['第一个','第二个','第三个'],
ojfor:{play:'football',people:'ming',age:'19'}
}
}
})
</script>
</body>
</html>
效果
下一篇： Linux学习笔记1：常用指令