I want to implement that when I click on an image in a list and let him switch, I can let him switch now, but when I click on the second li tab, I change the image of the previous switch. How to achieve, click that to change the current click, do not let it affect what has been changed?
Picture description
this is the current effect
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,ind) in list">
<img :src="num==ind?url:urls" alt="" @click.stop="up(ind)"/>
{{item.id}}
</li>
</ul>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
<script>
new Vue({
el:"-sharpapp",
data:{
list:[{id:1},{id:2},{id:3}],
url:"0111.png",
urls:"01.png",
num:null
},
methods:{
up(ind){
this.num = ind
}
}
})
</script>
</body>
</html>