vue折叠面板如何默认展开第一项

news/2024/12/22 20:28:01/

折叠面板

折叠面板官网:

项目展示:

在这里插入图片描述
在这里插入图片描述

代码展示:

  • 默认展开第一个
  • 默认展开第二个
  • 默认全部展开
  • 默认全部折叠

这里的title名字是自己定义的。绑定的值为name的值。由于这是一个循环嵌套的面板,故而绑定时需要用一个数组格式来接收。

注意:name前面有冒号,说明后面是一个变量或者表达式,没加冒号就是固定的字符串

在这里插入图片描述

  • 给title声明变量,并默认第一个面板展开
    在这里插入图片描述

  • 默认第二个面板展开
    在这里插入图片描述

  • 由于面板采用了for循环,故此时如果title中绑定的不是一个数组,则会报错:
    在这里插入图片描述
    在这里插入图片描述

  • 默认全部展开

此时这里的name前面没有冒号,说明绑定的是一个固定的字符串‘index’,那么只要title中绑定的名字和name的字符串一致,就是默认展开此面板,又由于这是一个for循环的面板,故所有的面板的名字是一致的,也就是默认全部展开(注:这里仍然用的是数组格式)

在这里插入图片描述

  • 默认全部折叠

默认折叠可以有很多种形式,这里采用name绑定的变量。只要title值和name值不一致,那么所有的面板就默认折叠了。
这里title绑定的是index字符串,而name绑定的是一个索引

在这里插入图片描述

后记

预祝接下来的产品越做越好


http://www.ppmy.cn/news/664714.html

相关文章

Html 中表格添加展开(折叠)按钮

简易代码&#xff1a; <html><head><meta http-equiv"Content-Typecontent"text/html; charsetUTF-8" /><title>compatibility assessment</title><script type"text/javascript" src"http://libs.baidu.com/…

html那种折叠文字内容怎么实现,html+css实现文字折叠特效实例

本文主要介绍了html+css实现文字折叠特效实例,分享给大家,具体如下: 效果: 实现: 1. 定义标签: aurora 2. 设置文字基本样式: h1{text-transform: uppercase; letter-spacing: 3px; font-size: 15vw; transform: rotate(-10deg) skew(30deg); position: relative; color…

Pittkai——Android折叠屏生命周期

Android折叠屏生命周期 &#xff08;第一次在CSDN上写文章&#xff0c;随便写写&#xff0c;记录一下&#xff09; 如今随着手机的发展&#xff0c;屏幕从分屏甚至走上了折叠屏的道路&#xff0c;即将推出的谷歌Android Q系统更是支持了折叠屏&#xff0c;但苦于手头没有Androi…

VSCode 折叠展开快捷键 macOS版

查看 commandshiftp 搜索fold和unfold 举例 折叠所有&#xff1a;commandk0(数字0)展开所有&#xff1a;commandkj折叠光标所在代码块&#xff1a;commandk[展开光标所在代码块&#xff1a;commandk]

Android魔术(第五弹)—— 一步步实现滑动折叠列表

目录 1、效果展示 2、效果分析 3、Item布局 3、实现Adapter 4、监听滑动 5、回弹效果 6、总结一下 源码&#xff1a; 1、效果展示 这个效果是一年多前完成的&#xff0c;是模仿了当时喵街app的首页的效果&#xff0c;现在整理出来可能有些过时了&#xff0c;不过一些知识点和思…

JS实现一键展开、折叠所有树节点

在数据分析报表中&#xff0c;通常会有结构树展开的分析报表。在结构树节点较多的时候&#xff0c;逐个进行展开、折叠等操作时&#xff0c;会比较繁琐、费时间、费手劲&#xff1b;此处示例通过点击按钮的方式&#xff0c;使用js实现一键展开、折叠所有的树节点&#xff08;不…

html内容折叠,HTML+CSS入门 文本折叠详解

本篇教程介绍了HTMLCSS入门 文本折叠详解&#xff0c;希望阅读本篇文章以后大家有所收获&#xff0c;帮助大家HTMLCSS入门。 < 先看效果&#xff1a; 收缩状态 展开状态 源代码&#xff1a; html>文本折叠测试 .a-text { font-size: 20px;color: #b30000;cursor: pointer…

Bootstrap3 折叠插件的使用方法

折叠 折叠插件&#xff08;collapse.js&#xff09;可以很容易地让页面区域折叠起来。当列表菜单的条目特别多&#xff0c;而页面空间有限时&#xff0c;使用类似于手风琴的折叠菜单可以节约页面空间&#xff0c;方便用户浏览。 使用方法 Bootstrap中&#xff0c;折叠组件的…