vue中v-if的显示问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-show</title>
<script src="js/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/aos.css" />
<script src="js/aos.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
flag:true,
flag1:false,
flag2:false,
flag3:false
},
methods:{
change(){
this.flag=false;
this.flag1=true;
this.flag2=false;
this.flag3=false;
},
change1(){
this.flag=true;
this.flag1=false;
this.flag2=false;
this.flag3=false;
},
change2(){
this.flag=false;
this.flag1=false;
this.flag2=true;
this.flag3=false;
},
change3(){
this.flag=false;
this.flag1=false;
this.flag2=false;
this.flag3=true;
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<a class="p1 pointer" id="p1" v-on:click="change">热门菜谱</a>
<a class="p2 pointer" id="p2" v-on:click="change1">健康养生</a>
<a class="p3 pointer" id="p3" v-on:click="change2">水果大全</a>
<a class="p4 pointer" id="p4" v-on:click="change3">精致甜品</a>
<hr>
<div style="width: 100px;height: 100px; background-color: red" v-if="flag" data-aos="fade-right">欢迎</div>
<div style="width: 100px;height: 100px; background-color: blue" v-if="flag1" data-aos="fade-right">欢迎</div>
<div style="width: 100px;height: 100px; background-color: black" v-if="flag2" data-aos="fade-right">欢迎</div>
<div style="width: 100px;height: 100px; background-color: pink" v-if="flag3" data-aos="fade-right">欢迎来</div>
</div>
</body>
</html>
是不是需要调用show(); 函数？可能不同的浏览器有不同要求。
页:
[1]