如何使用Vue在不同div模块实现点击按钮显示和隐藏功能

Question

如果我再写一个div显示和隐藏效果就没有了，只有第一个div有效

切换隐藏/显示

1111111

    <div>
        <div id="div1">
            <button v-on:click="toggle">切换隐藏/显示</button>
            <div v-if="hide">1111111</div>
        </div>
    </div>
    
    <script>
        new Vue({
            el:"#div1",
            data:{
                hide:false
            },
            methods:{
                toggle:function(){
                    this.hide=!this.hide;
                    
                }
            }
        })
    </script>

Answer 1

基于问题，给予建议
我帮你的代码重新写一遍，然后你自己试试就可以了

<div>
    <div id="div1">
        <button @click="toggle">切换隐藏/显示</button>
        <div v-if="hide">1111111</div>
    </div>
</div>
<script>
    new Vue({
        el:"#div1",
        data() {
            return {
              hide:false
            }
        },
        methods:{
            toggle(){
                this.hide = !this.hide;
            }
        }
    })
</script>

如有帮助 望点赞 采纳