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>