一.Vue的指令：
分为两大类；内置指令和自定义指令；今天我们就来学习一下Vue的内置指令；
1.>v-for ：
循环指令（遍历，其意义在于检查集合中的元素并做处理），根据一组数据的选项列表进行渲染；v-for指令主要用于列表渲染；v-for可以遍历数组和对象；
eg:<li v-for="(val,index) in obj">{{val}}</li>
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany"> {{msk}}
<ul>
<li v-for="a in arr">{{a}}</li>
<li v-for="i in obj">{{i}}</li>
<li v-for="(val,index) in arr">{{index}}--{{val}}</li>
<li v-for="(value,ins) in obj">{{ins}}--{{value}}</li>
<li v-for="(val,index) in arrs">{{val.name}} {{val.pname}} {{val.price}}</li>
</ul>
<table>
<thead border="1px">
<tr>
<th>编号</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arrs">
<td>{{val.name}}</td>
<td>{{val.pname}}</td>
<td>{{val.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
//element元素
el: "#itany"
, data: {
msk: "hello vue"
, arr: [1, 2, 3, 4, 5]
, obj: {
name: "泰迪"
}
, arrs: [
{
name: "1"
, pname: "香蕉"
, price: "3"
}
, {
name: "2"
, pname: "苹果"
, price: "2"
}
, {
name: "3"
, pname: "橘子"
, price: "1"
}
]
}
})
</script>
<div class="logo">
<img src="./TB1eEgNwYZnBKNjSZFhXXc.oXXa-290-130.gif" alt="">
</div>
</body>
</html>
2.>v-model:
(对表单元素进行双向数据绑定);该指令主要用于<input>,<textarea>,<select>标签中，它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理；
eg:<input type="text" v-model="message">
<p>{{message}}</p>
3.>v-on:
（绑定事件监听器）当模板渲染完成之后，就可进行事件的绑定与监听了；
事件类型由参数指定；表达式为：v-on:事件名=“函数名”；
注：事件名与js不同，使用时没有“on”；
eg:<button v-on:click="c">添加</button>
v-on可以绑定实例选项methods中的方法作为事件的处理器；
v-on后参数接受所有的原生事件名称；
实例:
点击来回切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<p>{{msg}}</p>
<button v-on:click="c">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:"hello world",
// trr:"hello vue",
flag:true
},
methods:{
c:function(){
if(this.flag){
this.msg="hello world",
this.flag=false
}else{
this.msg="hello vue"
this.flag=true
}
}
}
})
</script>
</body>
</html>
v-on：（点击按钮时输出“hello Vue”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<button v-on:click='alt'>按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#itany",
data:{
msg:"hello vue",
arr:[1,2,3]
},
methods:{
alt:function(){
console.log(vm.msg);
}
}
})
</script>
</body>
</html>
注：数组元素的添加与删除：添加：push（）；删除：splice(index,n) 从哪开始删，删几个；
4.>v-bind:
(主要用于动态绑定Dom元素属性，v-bind可动态的绑定一个或多个特性，或一个组件prop表达式。)在绑定class或style特性时，支持其他特性的值，如：数组或对象；
在绑定prop时，prop必修在子组件中声明；它可以用于修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。
表达式：v-bind：属性名=“值”；（只有函数调用时，函数方可执行）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<img v-bind:src="url" v-on:click="aa"/>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#name",
data:{
url:"img/banner_5.jpg",
flag:true
},
methods:{
aa:function(){
if(this.flag==true){
this.url="img/banner_5.jpg",
this.flag=false
}else{
this.url="img/banner_1.jpg",
this.flag=true
}
}
}
})
</script>
</body>
</html>
注：v-bind的属性名称驼峰化；
5.>v-show:
控制元素显示隐藏，与v-if不同的是，使用v-show元素，无论绑定值为true或false，均会渲染并保持在Dom中，绑定值的改变只会切换元素的css属性display；
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="name">
<!--<h1>{{msg}}</h1>
<p v-show="see">{{msg}}</p>-->
<button v-on:click="btn">点击隐藏</button>
<li v-show="see"></li>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
/*msg:"hello vue",*/
see:true
},
methods:{
btn:function(){
if(this.see==true){
this.see=false
}else{
this.see=true
}
/* this.see=!this.see*/
}
}
})
</script>
</body>
</html>
6.>v-if:
1.v-if与v-show都是可以根据条件展示元素的一种指令；
2.当v-if值为true时，显示div；当值为false时，该元素消失，代码也会消失，相当于将代码删除了；当值为true时，页面会重新渲染div；而v-show的值为false时，仍会正常操作，只是将css样式设置为：display：none；
7.>v-else,v-else-if:
不需要表达式 `v-else必须有v-if或v-else-if；
if(){}
if(){}else{}
else...if多重条件语句；
实例：（v-if，v-else,v-else-if随机数效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='itany'>
<p v-if='num==0'>0000000</p>
<h3 v-else-if='num==1'>11111</h3>
<h3 v-else-if='num==2'>22222</h3>
<h3 v-else-if='num==3'>33333</h3>
<h3 v-else-if='num==4'>44444</h3>
<h1 v-else>5555555</h1>
</div>
<script src='js/vue.js'>
</script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
效果图：
v-if v-else v-else-if.html.png
二：v-for,v-model,v-on综合应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>删除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
效果图：
Document.png
三.图片来回切换效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
text-align: center;
float: left;
width: 60px;
height: 40px;
line-height: 40px;
border: 1px solid gray;
margin-right: 3px;
}
</style>
</head>
<body>
<div id="name">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(val,index) in list"
v-on:click="btn(index)">
{{index+1}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
url:"01.jpg",
list:["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"]
},
methods:{
btn:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>
</html>
效果图：
Document1.png
网友评论