How does vue make this switch back and forth?

Click on each li and switch it to the value of val2. Click again, val2 can switch to the value of val, and you can always switch back and forth like this. What should I do with this effect? I wrote it like this. I"ve tried it. I can"t change it back.

<!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: "-sharpdiv1",
                    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>
Mar.25,2021

add a logo to the data,

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

then change:

    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;
            }
       })
    }

clipboard.png
your operation directly causes the data to be overwritten

if you want to achieve this effect, you can consider adding a showVal: default- > valIndex, to each item, to switch this variable per click, and then control the content displayed v-show or VMI if, do not change the original data

< hr >

code:

{{item.val}}</li>

change:function(item){
    item.val1 || (item.val1 = item.val)
    item.val = item.val === item.val1 ? item.val2 : item.val1
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b22728-4065a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b22728-4065a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?