新手写vue时发现不加{{}}数据不刷新是什么灵异现象?(求解答)

第一条博客用来提问嘻嘻:

先放代码:只是做一个单击切图的功能而已

<!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:
这个特立独行的0

在这里插入图片描述

在这里插入图片描述

以上是本菜鸡自学时vue遇到的疑惑(求解答)
最后附上原图,有空的热心网友可以试试:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值