vue遍历数组可以单击进行颜色切换，或者通过按钮进行整体切换

最新推荐文章于 2022-06-08 14:25:18 发布

qq_40322724

最新推荐文章于 2022-06-08 14:25:18 发布

阅读量997

点赞数

文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/qq_40322724/article/details/105537742

版权

开始是蓝色
在这里插入图片描述
再点击变红，再点击就会恢复原来颜色

还可以点击某一个进行切换
下面上代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">
		<div style="width: 80px;height: 80px;background-color: blue;" @click="fun2">显示</div>
		<div v-for="(coin,index) in num" :key='index' style="border: 1px solid black;" @click="fun1(coin)">
			{{num.name}}
			<div v-if="coin.flag" style="background-color: cyan;width: 100%;height: 100px;"></div>
			<div v-else style="background-color: red;width: 100%;height: 100px;"></div>
		</div>
	</div>
</body>
<script>
	const vue = new Vue({
		el: "#app",
		data: {
			num: [],
			
		},
		created() {
			// 请求接口 获取的数据
			let data = [
				{
					name: '测试一'
				},
				{
					name: '测试二'
				},
				{
					name: '测试三'
				}
			]
			this.num = data.map(element => {
				this.$set(element, 'flag', true)
				return element
			});			
		},
		methods: {
			fun1(item) {
				item.flag = !item.flag
			},
			fun2(){
				//遍历这个数组，对所有的flag取反
				this.num.forEach((item,index,arr)=>{
					item.flag = !item.flag
				})
			}
		}
	})
</script>

</html>

qq_40322724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue遍历数组可以单击进行颜色切换，或者通过按钮进行整体切换

开始是蓝色再点击变红，再点击就会恢复原来颜色还可以点击某一个进行切换下面上代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/java...
复制链接

扫一扫