vue 在网页中显示json 格式

npm install vue-json-viewer@2 --save
<template>
    <div>
        <json-viewer :value="data" :expand-depth="5" copyable boxed sort class="w-100%"></json-viewer>
    </div>
</template>
<script>
import JsonViewer from 'vue-json-viewer'
export default {
    components: {
        JsonViewer
    },
    data() {
        return {
            data: [
                {
                    id: '5968fcad629fa84ab65a5247',
                    firstname: 'Ada',
                    lastname: 'Lovelace',
                    aa:11
                },
            ]
        }
    }
}
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在OpenWrt网页使用Vue.js进行格式化输出可以通过以下步骤实现: 1. 首先,确保你已经安装了Vue.jsVue的Ant Design。 2. 创建一个Vue组件,用于显示OpenWrt的Web用户界面。你可以使用Ant Design的组件来构建界面。 3. 在Vue组件,使用json-rpc与OpenWrt子系统进行通信。你可以使用axios库来发送HTTP请求。 4. 获取OpenWrt返回的数据,包括一维路由数组和父级id(pid)。 5. 根据需要,可以选择将pid传递给前端或直接将有权限访问的路由name数组发送给前端。 6. 在Vue组件,根据name数组过滤出可访问的路由结构,并将其显示在页面上。 下面是一个简单的示例代码,演示了如何使用Vue.jsVue的Ant Design来格式化输出OpenWrt网页: ```vue <template> <div> <h1>OpenWrt Web用户界面</h1> <a-row v-for="route in accessibleRoutes" :key="route.name"> <a-col :span="24"> <a-card :title="route.name"> <p>{{ route.description }}</p> </a-card> </a-col> </a-row> </div> </template> <script> import axios from 'axios'; export default { data() { return { routes: [], // 一维路由数组 pid: '', // 父级id }; }, computed: { accessibleRoutes() { // 根据name数组过滤出可访问的路由结构 return this.routes.filter(route => this.nameArray.includes(route.name)); }, }, methods: { fetchData() { // 使用json-rpc与OpenWrt子系统通信,获取数据 axios.post('/api/openwrt', { method: 'getRoutes', params: { pid: this.pid, }, }) .then(response => { this.routes = response.data.routes; // 根据需要,可以选择将pid传递给前端或直接将有权限访问的路由name数组发送给前端 this.nameArray = response.data.nameArray; }) .catch(error => { console.error(error); }); }, }, mounted() { this.fetchData(); }, }; </script> ``` 请注意,上述代码仅为示例,具体实现可能需要根据你的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值