vue的指令
2018-09-14 本文已影响0人
大宝贝_4c6e
1.v-model
v-model是实现表单输入和应用状态之间的双向绑定。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
2.v-on
v-on是绑定一个事件
格式为：v-on:事件名="函数名"
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<button v-on:click="alt">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue"
},
methods:{
alt:function(){
alert(00000)
}
}
})
</script>
</body>
</html>
3.v-bind
v-bind是绑定属性
格式为:格式为:v-bind:属性名="值"
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<img v-bind:src="url" v-on:click="alt"/>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"img/timg.jpg",
flag:true,
},
methods:{
alt:function(){
if(this.flag==true){
this.url="img/timg1.jpg",
this.flag=false
}else{
this.url="img/timg.jpg",
this.flag=true
}
}
}
})
</script>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
width: 300px;
height: 300px;
}
ul li{
width: 40px;
height: 20px;
float:left;
display: block;
border:1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="" />
<ul>
<li v-for="(val,index) in arr" v-on:click="alt(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"img/1.jpeg",
arr:["img/1.jpeg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
},
methods:{
alt:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
</body>
</html>
4.v-show
v-show是控制元素的显示和隐藏，使用display:none隐藏
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<h1>{{msg}}</h1>
<h3 v-show="!see">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue",
see:true
}
})
</script>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="itany">
<button v-on:click="chg">点击隐藏</button>
<div class="box" v-show="see">
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
see:true
},
methods:{
chg:function(){
/*if(this.see==true){
this.see=false
}else{
this.see=true
}*/
this.see=!this.see
}
}
})
</script>
</body>
</html>
5.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">00000</p>
<p v-else-if="num==1">11111</p>
<p v-else-if="num==2">22222</p>
<p v-else-if="num==3">33333</p>
<p v-else-if="num==4">44444</p>
<p v-else="num==5">55555</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
