0

现在的情况是只能切换一次 变成val2后再点击就变不回来了 我想让它来回切换应该怎么办呢?

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <style type="text/css">
        ul{list-style: none;}
        li{border: 1px solid black;width: 100px;height: 20px;}
        </style>
        <script src="vue.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                new Vue({
                    el: '#div1',
                    data:{
                        arr:[
                            {uid:1,val:'zhangsan',val2:'tom',flag:true},
                            {uid:2,val:'lisi',val2:'john',flag:true},
                            {uid:3,val:'wangwu',val2:'jiff',flag:true},
                         ]
                     },
                     methods:{
                        change:function(uid){
                           this.arr.map(item => {
                                if(item.uid==uid&&item.flag){
                                    res=uid-1;
                                    item.val=this.arr[res].val2;
                                    item.flag=false;
                                }else if(item.uid==uid&&!item.flag){
                                    res=uid-1;
                                    item.val=this.arr[res].val;
                                    item.flag=true;
                                }
                           })
                        }
                     }
                     
                })
            }
        </script>
    </head>
    <body>
        <div id="div1">
                <button v-for="item in arr" @click="change(item.uid)">{{item.val}}</button>
        </div>
    </body>

</html>
fwer 135
2018-07-12 提问

查看全部 2 个回答

0

你可以再保存一份 arr2 , arr2 和 arr 保持一致,当你的 arr 改变了之后,你再像改回来,用 arr2 去赋值即可

推荐答案

1

已采纳

谢邀!


直接赋值粘贴便可看到结果,注重理解:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        ul{list-style: none;}
        li{border: 1px solid black;width: 100px;height: 20px;}
    </style>
</head>
<body>
    <div id="div1">
        <button v-for="item in arr" @click="change(item)">{{item.flag ? item.val : item.val2}}</button>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        new Vue({
        el: '#div1',
        data:{
            arr:[
                {uid:1,val:'zhangsan',val2:'tom',flag:true},
                {uid:2,val:'lisi',val2:'john',flag:true},
                {uid:3,val:'wangwu',val2:'jiff',flag:true},
             ]
         },
         methods:{
            change:function(item){
               return item.flag = !item.flag;
            }
         }
         
    })
    </script>
</body>
</html>

你可能感兴趣的

推广链接