vue中v-show的运用
2018-09-15 本文已影响0人
信不由衷
1.helloworld隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- v-show:控制元素的显示和隐藏，-->
<div id="itany">
<p>{{val}}</p>
<h1 v-show="!see">{{val}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
val:"hello word",
see:true
}
})
</script>
</body>
</html>
2.图片的隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="itany">
<button v-on:click="alt">点击切换</button>
<p v-show="see"></p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
see:true
},
methods:{
alt:function(){
/*if(this.see==true){
this.see=false
}else{
this.see=true
} */
this.see=!this.see
}
}
})
</script>
</body>
</html>
3.用v-show制作文字选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<ul>
<li v-for="(value,index) in card" @click='chg(index)'>{{value.title}}</li>
</ul>
<ul>
<li v-for="(value,index) in card" v-show='value.flag'>{{value.content}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
card:[
{title:'选项卡1',content:'选项卡1选项卡1选项卡1选项卡1',flag:true},
{title:'选项卡2',content:'选项卡2选项卡2选项卡2选项卡2',flag:false},
{title:'选项卡3',content:'选项卡3选项卡3选项卡3选项卡3',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
</body>
</html>
