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>

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

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

vue实现点击标题，显示隐藏兄弟元素（类似电脑打印设备显示打印设备）
本代码实现的功能:可动态添加里面的任何一级别的代码(不固定级别) html代码: <div class="hx-bigListOne"><div class=&q ...
js点击小眼睛显示隐藏密码框的密码
该按钮类似于登录页面后面的小眼睛点击显示密码再点击密码变星号核心思路:把密码框类型改为文本框即可看见里面的密码利用flag变量判断flag的值如果是1就切换文本框 flag设置为0 如果是 ...
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
目录一.如何单纯的在密码框显示密码二.如何在密码框里面显示并可以隐藏密码三.代码展示四.结果展示一.如何单纯的在密码框显示密码单纯显示密码可以吧type里面的值改成text,如果要隐藏 ...
vue通过返回值来判断图标的显示/隐藏，改变图标颜色
在表格中通过后台返回数据来判断图标的变化方法1: 如上,后台返回的status=1为已阅,status=0为未批阅,已阅则显示绿色的图标,我这里是用vue+elementui来实现的: <el ...
js点击按钮div显示隐藏
<input type="button" value="隐藏" id="btn"> <div id="box&q ...
uni-app 点击小眼睛显示/隐藏密码
<template><view><form><view class="cu-form-group margin-lg "><i ...
uni-app点击编辑显示隐藏修改删除图标
在uni-app中点击编辑,显示隐藏修改删除图标. 特别感谢我的同桌~
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
<input id="btnClick" type="button" value="原生写法" class="btn-gre ...
JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...

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

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

最新文章

热门文章