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>
    

      

  • 相关阅读:
    Android实战:手把手实现“捧腹网”APP(一)-----捧腹网网页分析、数据获取
    容器云平台使用体验:数人云Crane(续)
    [React Native]升级React Native版本
    [React Native]去掉WebStorm中黄色警告
    数据库--mysql介绍
    缓存数据库-redis(补充)
    缓存数据库-redis(订阅发布)
    缓存数据库-redis(管道)
    缓存数据库-redis数据类型和操作(sorted set)
    缓存数据库-redis数据类型和操作(set)
  • 原文地址:https://www.cnblogs.com/MissBean/p/vueSet.html
Copyright © 2011-2022 走看看