weixin_37858450
weixin_37858450
采纳率100%
2018-12-22 15:09

求教:关于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条回答

  • jslang 天际的海浪 3年前
    <!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>
    
    点赞 评论 复制链接分享

相关推荐