第一条博客用来提问嘻嘻:
先放代码:只是做一个单击切图的功能而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show的使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
.pic
{
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="app">
<img src="./pic/0.png" alt="0.png" @click='isclick' v-show='status[0]'>
<img class="pic" src="./pic/1.png" alt="1.png" @click='isclick' v-show='status[1]'>
<img class="pic" src="./pic/2.png" alt="2.png" @click='isclick' v-show='status[2]'>
{{index}} //问题出现在这
</div>
<script>
var app = new Vue({
el:'#app',
data:{
status:[true,false,false],
index:0,
},
methods:{
isclick:function(){
this.status[this.index] = false;
this.status[this.index + 1] = true;
this.index++;
if(this.index == 3){
this.index = 0;
this.status[0] = true;
}
},
}
})
</script>
</body>
</html>
灵异现象是去掉{{index}}的显示之后,点击图片就不切换到下一张了;只有加入{{index}},或者{{其他data}}有刷新动作时才会一起刷新。但是只有在图一的时候显示了{{index}},正常来说应该是[0,1,2]按顺序显示。
效果图:
特立独行的0:
以上是本菜鸡自学时vue遇到的疑惑(求解答)
最后附上原图,有空的热心网友可以试试: