vue怎樣來回切換？

現(xiàn)在的情況是只能切換一次變成val2后再點(diǎn)擊就變不回來了我想讓它來回切換應(yīng)該怎么辦呢？

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

回答

編輯回答

玩控

謝邀！

直接賦值粘貼便可看到結(jié)果，注重理解：

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

2017年2月3日 10:47

編輯回答