vue中如何显示格式化的xml文本

Posted 2023-04-13

参考技术A 最近在做项目时遇到的，有一个功能返回是一个xml文本，需要很友好的显示在html中。

前端的框架是vue。

调研了一些格式化xml的网站找到了答案，发现了两个很好的库：vkbeautify & vue-highlightjs，前者主要是用来格式化xml，后者是将code里的xml都加上标签，这样我们就可以很轻易的通过样式来控制标签的颜色、粗细等样式了。

npm install vkbeautify --save

npm i vue-highlight.js --save

基本使用方法：

首先要在main.js

模板中

如何在vue js html的文本框中显示选定的计划值？

【中文标题】如何在vue js html的文本框中显示选定的计划值？

【英文标题】：How to show the selected plan value in a text box in vue js html?

【发布时间】：2018-08-01 22:27:26

【问题描述】：

我的json数据如下

"status": true, "plans": ["planId": 1, "name": "Baic", "cost": 500.0, "validity": 365, "planId": 3, "name": "free", "cost": 0.0, "validity": 999, "planId": 4, "name": "Premium", "cost": 500.0, "validity": 500, "planId": 5, "name": "Super Premium", "cost": 750.0, "validity": 600, "planId": 6, "name": "New", "cost": 600.0, "validity": 180]

我需要从上面的列表中选择一个特定的类别并在文本框中显示该类别的相应成本，我需要能够编辑该值。我怎么能得到同样的东西。

目前我的html代码是

   <div class="form-group">
        <label>Plan <small>(select your plan)</small></label>
     <select id="bas" class="selectpicker"  data-live-search="true" data-live-search-style="begins" title="Select Plan" v-model="plan" name="plan" ref="plan" required="required">
   <option v-for="post in plansb" v-bind:value="post.planId" v-if="plansb.indexOf(post) > 0">post.name (Rs.post.cost)</option>
            </select>
            </div>
        <div class="form-group">
     <label>Plan Amount <small>(required)</small></label>
<input name="plan_amt" type="text" class="form-control" id="plan_amt" placeholder="Plan Amount" v-model="plan_amt" />
        </div>

在“计划金额”文本框中，我需要显示从上述选择中选择的类别的成本。现在我需要输入金额。如果选择planId = 1，我需要在文本框中显示500。我还需要编辑这些值并作为 ajax 请求发送。

我怎样才能得到这样的结果。

我的vue js代码是

vBox = new Vue(
el: "#vBox",
  data: 
        plansb: [],
        plan: '',
        plan_amt: '',
    ,
     mounted: function() 
       var vm = this;
            $.ajax(
            url: "http://127.0.0.1:8000/alpha/get/plan/",
            method: "GET",
            dataType: "JSON",
            success: function(e) 
               if (e.status == 1)  
             vm.plansb = e.plans;
            
            ,
        );
       ,
      methods: 
         handelSubmit: function(e) 
               var vm = this;
               data = ;
               data['plan'] = this.plan;
               data['plan_amt'] = this.plan_amt;

                $.ajax(
                  url: 'http://127.0.0.1:8000/alpha/add/post/',
                  data: data,
                  type: "POST",
                  dataType: 'json',
                  success: function(e) 
                  if (e.status)
                  

                    $("#alertModal").modal('show');
                  $(".alert").removeClass("hidden").html("Your data has been successfully recorded");

                    vm.pid=e.pid;
                    console.log(vm.pid);

                
                  else 
                    vm.response = e;

                   alert("Registration Failed") 
                  
              
                );
                return false;
              ,

任何人都可以帮助我获得结果。根据从选择中选择的计划，我需要更新文本框中的值。请帮我看看结果。

【问题讨论】：

是plans 还是plansb。向我们展示数据选项。

好的先生，我会更新我的 vue js

先生.. 我已将 json 数据保存在 plasb[] 中。

【参考方案1】：

您需要添加列表的更改事件并获取计划的planid，并根据planid获取它的成本并将其分配给您要显示更改计划成本的成本（文本框）模型

【讨论】：

你能帮我解决一下吗

为您的问题添加一个示例。

***.com/questions/48921342/working-hours-selection我也面临这样的情况..你能提供一个解决方案