vue 自定义属性判断点击每个item 显示隐藏

最新推荐文章于 2023-04-04 15:59:36 发布

p是马甲

最新推荐文章于 2023-04-04 15:59:36 发布

阅读量585

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MissBean/p/vueSet.html

版权

用到的知识点有循环读出列表 v-for map 或 vue.set

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>点击显示隐藏</title>
</head>
<style type="text/css">
	.item {
	  border:1px solid #333;
	  padding:10px 20px;
	  margin:5px;
	  background-color: #f5f5f5;  
	}
	.item-bd {
		display: none;
	}
	.item.open .item-bd {display: block;}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <div id="list">
  	<div class="item" v-for="(item, index) in items" @click="toggle(item)" :class="{'open':item.show}">
  		<div class="item-hd">{{index+1}}</div>
  		<div class="item-bd">{{item.content}}</div>
  	</div>
	</div>
	<script type="text/javascript">
		var data =  [{
		  content: 'aaaaaaaaaa',
		}, {
		  content: 'bbbbbbbbbb',
		}, {
		  content: 'cccccccccc',
		}];
		data.map(function(item){
		  item.show = false;
		});
		new Vue({
			el: '#list',
			data : {
				items: data
			},
			methods: {
		    toggle: function(item) {
		      item.show = !item.show;
		    }
		  }
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>点击显示隐藏</title>
</head>
<style type="text/css">
	.item {
	  border:1px solid #333;
	  padding:10px 20px;
	  margin:5px;
	  background-color: #f5f5f5;  
	}
	.item-bd {
		display: none;
	}
	.item.open .item-bd {display: block;}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <div id="list">
  	<div class="item" v-for="(item, index) in items" @click="toggle(item)" :class="{'open':item.show}">
  		<div class="item-hd">{{index+1}}</div>
  		<div class="item-bd">{{item.content}}</div>
  	</div>
	</div>
	<script type="text/javascript">
		var data =  [{
		  content: 'aaaaaaaaaa',
		}, {
		  content: 'bbbbbbbbbb',
		}, {
		  content: 'cccccccccc',
		}];
		data.map(function(item){
		  item.show = false;
		});
		new Vue({
			el: '#list',
			data : {
				items: [{
				  content: 'aaaaaaaaaa',
				}, {
				  content: 'bbbbbbbbbb',
				}, {
				  content: 'cccccccccc',
				}]
			},
			methods: {
		    toggle: function(item) {
		      Vue.set(item,'show',this.show=!this.show);
		    }
		  }
		})
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/MissBean/p/vueSet.html

p是马甲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 自定义属性判断点击每个item 显示隐藏

用到的知识点有循环读出列表 v-for map 或 vue.set<!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> &lt...
复制链接

扫一扫