weixin_37858450 2018-12-22 15:09 采纳率: 100%
浏览 1178
已采纳

求教：关于Vue的v.show属性在隐藏列表项方面的两个问题。

想要实现的功能：
1. 按add按钮添加列表项。
2. 按del按钮永久隐藏对应列表项。

程序如下：
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Vue test</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
     <div id="app">
        <div v-show="task.show" v-for="(item,index) in list">
            <span>{{item.content}}</span>
            <button v-on:click="del(index)">del</button>
        </div>
        <button v-on:click="add">add</button>
     </div>

     <script>
         var vm = new Vue ({
             el: "#app",
             data: {
                 task: {
                    content: "",
                    show: true
                 },
                 list: [],
             },
             methods: {
                 del:function(index) {
                    this.list[index].show = !this.list[index].show;
                 },
                 add:function() {
                    this.task = {
                        content: "new",
                        show: true
                    };
                    this.list.push(this.task);
                 }
             }
         });
     </script>
 </body>
 </html>

出现的问题：
1. 按add按钮增加了3个列表项后，对第二个列表项按del按钮，仅会修改show的内容为false，但并不隐藏。
2. 按add按钮增加了n个列表项后，只有第n个del按钮能隐藏列表项，而且是隐藏所有列表项。

想要请教各位前辈，问题出在哪里？谢谢
  • 写回答

1条回答 默认 最新

  • 天际的海浪 2018-12-22 07:26
    关注
    <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Vue test</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
     <div id="app">
        <div v-show="item.show" v-for="(item) in list">
            <span>{{item.content}}</span>
            <button v-on:click="del(item)">del</button>
        </div>
        <button v-on:click="add">add</button>
     </div>

     <script>
         var vm = new Vue ({
             el: "#app",
             data: {
                 list: []
             },
             methods: {
                 del:function(item) {
                    item.show = false;
                 },
                 add:function() {
                    var obj = {
                        content: "new",
                        show: true
                    };
                    this.list.push(obj);
                 }
             }
         });
     </script>
 </body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器