1.图片来回切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
// 用v-bind来绑定一个属性
<img v-bind:src="url" alt="" v-on:click='b'>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
url:'img/1.jpg',
flag:true
},
//用if时间使图片来回循环
methods:{
b:function(){
if(this.flag){
this.url='img/2.jpg';
this.flag=false;
}else{
this.url='img/1.jpg';
this.flag=true
}
}
}
})
</script>
</body>
</html>
2.用v-show制作选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
给一下属性 添加效果
<style>
ul{
overflow: hidden;
}
li{
list-style: none;
width:60px;
border:1px solid #000;
text-align: center;
float:left;
}
</style>
</head>
<body>
<div id='itany'>
<img v-bind:src="url" alt="">
利用for循环 点击事件 还有index+1 下标加一 从零开始 0+1
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
list:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
},
给一个函数 执行里面的代码话
methods:{
chg:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>
</html>
3.隐藏文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
//msg代替html里的标签
<p>{{msg}}</p>
<h1 v-show="!see">{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue',
see:true
}
})
</script>
</body>
</html>
4.点击button隐藏显示图片
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background: #f00;
}
</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-els v-else-if的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if="num==0">0000000000000000</p>
<p v-else-if="num==1">111111111111</p>
<p v-else-if="num==2">2222222222222</p>
<p v-else-if="num==3">333333333333</p>
<p v-else-if="num==4">444444444444</p>
<p v-else='num==5'>55555555555555555</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>
</body>
</html>
