请给我一杯拿铁,谢谢! 2021-12-09 11:01 采纳率: 70%
浏览 70
已结题

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

如果我再写一个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>
  • 写回答

4条回答 默认 最新

  • baidu_19510369 2021-12-09 11:21
    关注

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

    <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>
    

    如有帮助 望点赞 采纳

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月9日
  • 已采纳回答 4月1日
  • 创建了问题 12月9日

悬赏问题

  • ¥50 神舟笔记本,没有linux的驱动,装的Ubuntu系统,想把风扇速度调到最大
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,怎样解决呢?
  • ¥50 如何用单纯形法寻优不能精准找不到给定的参数,并联机构误差识别,给定误差有7个?matlab
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,没有XFS,怎样解决呢?
  • ¥15 应用商店如何检测在架应用内容是否违规?
  • ¥15 Ubuntu系统配置PX4
  • ¥50 nw.js调用activex
  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题