有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue展开收起动画(vue 类似手风琴特效)展开收起,不点收回,不会隐藏内容

vue 炮渣日记 2周前 (11-15) 9次浏览 已收录 0个评论 扫描二维码

需求:

1、每个按钮都能点击展开和收起功能

2、如果不点击收回,所有点击展示的都不会被收起

<div id="app">
    	<ul>
    		<li v-for="(list,index) in lists" :key="index">
    			{{list.id}}
    			<button @click="isShow(list)" > {{list.isHide ? '收起':'展开'}}</button>
    			<div v-show="list.isHide">{{list.name}}</div>
    		</li>
    	</ul>       
    </div>
    <script src="http://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
vue展开收起动画(vue 类似手风琴特效)展开收起,不点收回,不会隐藏内容
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				lists:[
					{id:1,name:"aa",isHide:false},
					{id:2,name:"bb",isHide:false},
					{id:3,name:"cc",isHide:false}
				],
				idx:-1,
			}
		},
		methods: {
			isShow(item) {
				item.isHide = !item.isHide;
			}
		},
	})
</script>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址