zoukankan      html  css  js  c++  java
  • 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">
      <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>
    

      

  • 相关阅读:
    C语言--存储类、链接和内存管理
    Linux终端使用技巧——个人总结
    mini2440应用例程学习(二)—— buttons
    ubuntu安装配置NFS服务方便mini2440挂载
    shell中常用I/O重定向命令格式说明
    Linux Bash内置命令大全详细介绍
    mini2440应用例程学习(一)—— led-player
    Shell编程练习(一)——ping一下
    < IOS开发 >使用CGContextRef绘制文字时的设置
    < Objective-C >使用kvc获取数组最大最小值
  • 原文地址:https://www.cnblogs.com/MissBean/p/vueSet.html
Copyright © 2011-2022 走看看