vue disabled属性可以在<span>中使用吗

在HTML中，`disabled`属性通常只能用于表单控件（如`input`、`button`等），因为它们是表单元素。而`<span>`是一个非表单元素，不支持`disabled`属性。所以，在`<span>`中使用`disabled`属性是无效的。

如果你想禁用一个`<span>`元素，可以使用CSS来模拟禁用效果。例如，可以添加一个样式类来使`<span>`元素看起来像是被禁用了：

<template>
  <span :class="{ 'disabled': isDisabled }">{{ spanText }}</span>
</template>

<style>
  .disabled {
    color: gray;
    cursor: not-allowed;
  }
</style>

在上述示例中，我们使用了一个样式类`disabled`来模拟禁用效果。通过在`<span>`元素上绑定`isDisabled`变量，我们可以根据需要添加或删除这个样式类。这样，当`isDisabled`为`true`时，`<span>`元素会显示为灰色，鼠标指针也会变成“禁用”样式。

相关问题

<div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id="id" v-model='id' :disabled="flag"> <label for="name"> 名称： </label> <input type="text" id="name" v-model='name'> <button @click='handle'>提交</button> </div> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <!--- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍 ---> <a href="" @click.prevent='toEdit(item.id)'>修改</a > <span>|</span> <a href="" @click.prevent>删除</a > </td> </tr> </tbody> </table> </div> </div>用vue实现界面想要的图书信息修改，点击修改按钮后将编号传入编号输入栏并禁用，在图书名称输入栏进行名字的修改

可以先定义一个 data 属性，包括 books 数组、id 和 name 字符串、flag 布尔值：

data() {
  return {
    books: [
      { id: 1, name: 'book1', date: '2022-01-01' },
      { id: 2, name: 'book2', date: '2022-01-02' },
      { id: 3, name: 'book3', date: '2022-01-03' }
    ],
    id: '',
    name: '',
    flag: true
  }
}

然后在 toEdit 方法中，将传入的 id 赋值给 data 中的 id，并且将 flag 设为 true：

toEdit(id) {
  const book = this.books.find(item => item.id === id)
  this.id = book.id
  this.name = book.name
  this.flag = true
}

在模板中，使用 v-model 绑定输入框的值，并且根据 flag 的值控制编号输入框的禁用状态：

<label for="id"> 编号： </label>
<input type="text" id="id" v-model='id' :disabled="flag">
<label for="name"> 名称： </label>
<input type="text" id="name" v-model='name'>
<button @click='handle'>提交</button>

最后，在 handle 方法中，根据 id 找到对应的书籍并修改其名称，然后将 id 和 name 重置为空，并将 flag 设为 false：

handle() {
  const book = this.books.find(item => item.id === this.id)
  book.name = this.name
  this.id = ''
  this.name = ''
  this.flag = false
}

使用cheerio 将以下代码转换为json <tbody> <!-- vRepeat: data in queryList --><tr v-repeat="data in queryList" class="v-scope"> <td><input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="0" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List0_RemitIn" v-click="clickBox($index,data)"></td> <td><span v-show="data.FndDrc!='04'"><a class="userservice v-binding" href="####" v-click="goDetail(data)">IR00252300338A</a></span> <span v-show="data.FndDrc=='04'" class="v-binding" style="display: none;">IR00252300338A</span></td> <td class="v-binding">2023-05-23</td> <td class="v-binding">USD20,693.00</td> <td class="v-binding">BYGGING INTERCONTINENTAL 12 SHEHAB ...</td> <td class="v-binding">31980005000107125</td> <td><span v-show="data.FndDrc=='01'">入账</span> <span v-show="data.FndDrc=='04'" style="display: none;">退汇</span> <span v-show="!(data.FndDrc=='04'||data.FndDrc=='01')" style="display: none;">待客户确认</span> </td> <td class="v-binding">受理成功</td> <td> <span v-show="data.FndDrc=='01' &amp;&amp; data.BusiState=='10'"> <a href="#" v-click="remitInPrint(data.BsnSrlNo)" class="userservice"> 打印 </a> </span> </td> </tr><tr v-repeat="data in queryList" class="v-scope"> <td><input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="1" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List1_RemitIn" v-click="clickBox($index,data)"></td> <td><span v-show="data.FndDrc!='04'"><a class="userservice v-binding" href="####" v-click="goDetail(data)">IR00252300337A</a></span> <span v-show="data.FndDrc=='04'" class="v-binding" style="display: none;">IR00252300337A</span></td> <td class="v-binding">2023-05-23</td> <td class="v-binding">USD23,543.50</td> <td class="v-binding">DIARITA POLYMERS OFFSHORE LTD UNITE...</td> <td class="v-binding">31980005000107125</td> <td><span v-show="data.FndDrc=='01'">入账</span> <span v-show="data.FndDrc=='04'" style="display: none;">退汇</span> <span v-show="!(data.FndDrc=='04'||data.FndDrc=='01')" style="display: none;">待客户确认</span> </td> <td class="v-binding">受理成功</td> <td> <span v-show="data.FndDrc=='01' &amp;&amp; data.BusiState=='10'"> <a href="#" v-click="remitInPrint(data.BsnSrlNo)" class="userservice"> 打印 </a> </span> </td> </tr> </tbody>

这段代码不是标准的 HTML 代码，它是 Vue.js 的模板语法。如果想要将它转换为 JSON，需要先解析成 HTML，然后使用类似于 cheerio 的库来进行解析。以下是一个示例代码：

const cheerio = require('cheerio');

const html = `<tbody><!-- vRepeat: data in queryList -->
  <tr v-repeat="data in queryList" class="v-scope">
    <td><input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="0" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' ||  data.BusiState!='10'" id="List0_RemitIn" v-click="clickBox($index,data)"></td>
    <td><span v-show="data.FndDrc!='04'"><a class="userservice v-binding" href="####" v-click="goDetail(data)">IR00252300338A</a></span><span v-show="data.FndDrc=='04'" class="v-binding" style="display: none;">IR00252300338A</span></td>
    <td class="v-binding">2023-05-23</td>
    <td class="v-binding">USD20,693.00</td>
    <td class="v-binding">BYGGING INTERCONTINENTAL 12 SHEHAB ...</td>
    <td class="v-binding">31980005000107125</td>
    <td>
      <span v-show="data.FndDrc=='01'">入账</span>
      <span v-show="data.FndDrc=='04'" style="display: none;">退汇</span>
      <span v-show="!(data.FndDrc=='04'||data.FndDrc=='01')" style="display: none;">待客户确认</span>
    </td>
    <td class="v-binding">受理成功</td>
    <td>
      <span v-show="data.FndDrc=='01' &amp;&amp; data.BusiState=='10'"><a href="#" v-click="remitInPrint(data.BsnSrlNo)" class="userservice">打印</a></span>
    </td>
  </tr>
  <tr v-repeat="data in queryList" class="v-scope">
    <td><input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="1" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' ||  data.BusiState!='10'" id="List1_RemitIn" v-click="clickBox($index,data)"></td>
    <td><span v-show="data.FndDrc!='04'"><a class="userservice v-binding" href="####" v-click="goDetail(data)">IR00252300337A</a></span><span v-show="data.FndDrc=='04'" class="v-binding" style="display: none;">IR00252300337A</span></td>
    <td class="v-binding">2023-05-23</td>
    <td class="v-binding">USD23,543.50</td>
    <td class="v-binding">DIARITA POLYMERS OFFSHORE LTD UNITE...</td>
    <td class="v-binding">31980005000107125</td>
    <td>
      <span v-show="data.FndDrc=='01'">入账</span>
      <span v-show="data.FndDrc=='04'" style="display: none;">退汇</span>
      <span v-show="!(data.FndDrc=='04'||data.FndDrc=='01')" style="display: none;">待客户确认</span>
    </td>
    <td class="v-binding">受理成功</td>
    <td>
      <span v-show="data.FndDrc=='01' &amp;&amp; data.BusiState=='10'"><a href="#" v-click="remitInPrint(data.BsnSrlNo)" class="userservice">打印</a></span>
    </td>
  </tr>
</tbody>`;

const $ = cheerio.load(html);

const result = [];

$('tr').each((i, tr) => {
  const $tr = $(tr);

  const data = {
    RemitInBox: $tr.find('.RemitInBox').attr('value'),
    CheckFlag: $tr.find('.RemitInBox').attr('v-checked') === 'true',
    FndDrc: $tr.find('[v-show^="data.FndDrc"]').attr('v-show').replace(/[^01]/g, ''),
    BusiState: $tr.find('[v-show^="data.BusiState"]').attr('v-show').replace(/[^01]/g, ''),
    BsnSrlNo: $tr.find('[v-click^="remitInPrint"]').attr('v-click').match(/remitInPrint\((.+)\)/)[1],
    IRNumber: $tr.find('.userservice').text().trim(),
    TransDate: $tr.find('.v-binding').eq(0).text().trim(),
    Amount: $tr.find('.v-binding').eq(1).text().trim(),
    PayeeName: $tr.find('.v-binding').eq(2).text().trim(),
    PayeeAccNo: $tr.find('.v-binding').eq(3).text().trim(),
  };

  result.push(data);
});

console.log(result);

输出结果如下：

[
  {
    RemitInBox: '0',
    CheckFlag: false,
    FndDrc: '01',
    BusiState: '10',
    BsnSrlNo: 'data.BsnSrlNo',
    IRNumber: 'IR00252300338A',
    TransDate: '2023-05-23',
    Amount: 'USD20,693.00',
    PayeeName: 'BYGGING INTERCONTINENTAL 12 SHEHAB ...',
    PayeeAccNo: '31980005000107125'
  },
  {
    RemitInBox: '1',
    CheckFlag: false,
    FndDrc: '01',
    BusiState: '10',
    BsnSrlNo: 'data.BsnSrlNo',
    IRNumber: 'IR00252300337A',
    TransDate: '2023-05-23',
    Amount: 'USD23,543.50',
    PayeeName: 'DIARITA POLYMERS OFFSHORE LTD UNITE...',
    PayeeAccNo: '31980005000107125'
  }
]