如何在<pre>标签中折叠和展开json

在<pre>标签中折叠和展开JSON，可以通过使用一些前端库或框架来实现。以下是一种常见的实现方式：

1. 使用JavaScript库：例如，可以使用jQuery库中的方法来实现折叠和展开JSON。具体步骤如下：

• 在HTML文件中引入jQuery库的CDN链接或本地文件。
• 创建一个<pre>标签，并将JSON数据作为文本内容放置在<pre>标签中。
• 使用jQuery的方法来处理<pre>标签中的JSON数据，实现折叠和展开效果。例如，可以使用.hide()和.show()方法来隐藏和显示JSON数据的部分内容。

示例代码如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<pre id="json-data">

{

 "name": "John Doe",

 "age": 30,

 "email": "johndoe@example.com",

 "address": {

   "street": "123 Street",

   "city": "New York",

   "country": "USA"

 }

}

</pre>

<script>

$(document).ready(function() {

 // 初始状态下隐藏address字段

 $("#json-data").find("span:contains('address')").siblings().hide();

 // 点击折叠/展开

 $("#json-data").on("click", "span", function() {

   $(this).siblings().toggle();

 });

});

</script>

在上述示例中，初始状态下，address字段被隐藏起来。当用户点击字段名时，对应的字段值将被展开或折叠。

1. 使用Vue.js框架：Vue.js是一种流行的JavaScript框架，可以用于构建用户界面。通过使用Vue.js的指令和数据绑定，可以实现在<pre>标签中折叠和展开JSON的功能。具体步骤如下：

• 在HTML文件中引入Vue.js库的CDN链接或本地文件。
• 创建一个Vue实例，并将JSON数据作为数据绑定到实例中。
• 使用Vue的指令（例如v-if、v-show）来根据条件显示或隐藏JSON数据的部分内容。

示例代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<pre id="json-data">

{{ jsonData }}

</pre>

<script>

new Vue({

 el: '#json-data',

 data: {

   jsonData: {

     "name": "John Doe",

     "age": 30,

     "email": "johndoe@example.com",

     "address": {

       "street": "123 Street",

       "city": "New York",

       "country": "USA"

     }

   }

 }

});

</script>

在上述示例中，通过Vue.js的数据绑定，将JSON数据渲染到<pre>标签中。可以使用Vue的指令来根据条件显示或隐藏JSON数据的部分内容。

无论是使用jQuery还是Vue.js，都可以实现在<pre>标签中折叠和展开JSON的功能。具体选择哪种方式取决于项目需求和开发团队的偏好。