vue怎樣讓這個(gè)可以來回切換？

點(diǎn)擊每個(gè)li后讓它切換成val2的值再點(diǎn)一次val2可以切換成val的值可以一直這樣來回切換這個(gè)效果應(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'},
                            {uid:2,val:'lisi',val2:'john'},
                            {uid:3,val:'wangwu',val2:'jiff'},
                         ]
                     },
                     methods:{
                        change:function(uid){
                           this.arr.map(item => {
                                if(item.uid==uid){
                                    item.val=item.val2;
                                }else{
                                    item.val=item.val;
                                }
                           })
                        }
                     }
                     
                })
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li v-for="item in arr" @click="change(item.uid)">{{item.val}}</li>
            </ul>
        </div>
    </body>

</html>

回答

編輯回答

離夢(mèng)

你這個(gè)操作直接導(dǎo)致了數(shù)據(jù)被覆蓋

如果要實(shí)現(xiàn)這個(gè)效果，可以考慮給每一個(gè)item，增加一個(gè) showVal: default->valIndex,每次點(diǎn)擊切換這個(gè)變量，然后控制展示的內(nèi)容 v-show or v-if，不要改動(dòng)原始數(shù)據(jù)

code:

<li v-for="item in arr" @click="change(item.uid)">{{item.showVal === 1? item.val : item.val2}}</li>

data:{
    arr:[
        {uid:1,val:'zhangsan',val2:'tom', showVal: 1},
        {uid:2,val:'lisi',val2:'john',  showVal: 1},
        {uid:3,val:'wangwu',val2:'jiff', showVal: 1},
        ]
    },

methods: {
    change:function(uid){
        this.arr.map(item => {
            item.showVal = (item.showVal === 1 ? 2 : 1);
        })
    }
}

2017年8月13日 06:30

編輯回答

吢丕

data里面加個(gè)標(biāo)識(shí)，

    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},
         ]
     },

然后change的時(shí)候：

    change:function(uid){
       this.arr.map(item => {
            if(item.uid==uid && item.flag){
                item.flag=false;
                item.val=item.val2;
            }else{
                item.flag=true;
                item.val=item.val;
            }
       })
    }

2018年1月13日 18:06

編輯回答

吢丕

<li v-for="item in arr" @click="change(item)">{{item.val}}</li>

change:function(item){
    item.val1 || (item.val1 = item.val)
    item.val = item.val === item.val1 ? item.val2 : item.val1
}

2017年2月26日 21:44