1.
v-show和v-if都可以控制元素的显示或隐藏
v-show 例：
<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>
QQ图片20180913145953.png
例：点击显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
display: block;
width: 200px;
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div id="asd">
<button v-on:click='alt'>显示、隐藏</button>
<p v-show='see'></p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#asd',
data:{
see:true
},
methods:{
alt:function(){
this.see=!this.see;
}
}
})
</script>
</body>
</html>
QQ图片20180913150936.png
2.v-bind
v-bind：属性名='事件名' 绑定属性
例：点击图片即可切换
<body>
<div id="itany">
<img v-bind:src="url" v-on:click='ack'alt="">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'4.gif',
flag:true
},
methods:{
ack:function(){
if(this.flag){
this.url='4.gif'
this.flag=false
}else{
this.url='5.gif'
this.flag=true
}
}
}
})
</script>
</body>
QQ截图20180913151814.png
例：v-bind 点击标签切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li{
float: left;
list-style: none;
padding: 10px 20px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for='(value,index) in arr' v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
// arr:[1,2,3,4,5]
url:'0.jpg',
arr:['0.jpg','index.jpg','5.gif']
},
methods:{
chg:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
</body>
</html>
QQ截图20180913153024.png
3.
条件判断使用 v-if 指令，
可以用 v-else 指令给 v-if 添加一个 "else" 块，
v-els-if用作 v-if 的 else-if 块。可以链式的多次使用，
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
例：
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
网友评论