老师，如果想实现再点击一次就恢复应该怎么写代码
来源：3-17 编程练习
twtszz
2020-08-13 21:40:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
width: 100px;
text-align: center;
line-height: 30px;
margin: 10px;
background: #073607;
color: #fff;
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- 在此补充代码 -->
<li v-for="(item,index) in list"
:style="{'background':currentIdx == index?item:'#073607'}"
@click='itemClick(index,item)'
>
{{item}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
list: ["green", "pink", "orange", "purple"],
// 在此补充代码
currentIdx:0
}
},
methods: {
// 在此补充代码
itemClick:function(index,item){
this.currentIdx = index;
}
}
})
</script>
</body>
</html>
2回答
-
好帮手慕久久
2020-08-14
同学你好，可以如下这样写：
同学试一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
1h020-08-14 -
好帮手慕久久
2020-08-14
同学你好，return的作用是终止程序往下执行，如下：
所以程序一旦执行if语句，遇到return后，就会终止itemClick方法中的代码继续往下执行，即return下面的语句：“this.currentIdx=index”就不会执行了。当再次点击后，会再重新执行itemClick中的代码，如果if语句的条件不满足，则执行“this.currentIdx=index”，如果满足if语句，则执行if语句中的代码，同样，遇到return后，代码就结束往下执行，不再执行“this.currentIdx=index”。
可以改写成如下形式：
同学哪种方式好理解，就写哪种。
祝学习愉快！
0
相似问题
回答 2
回答 4