Javascript html：如何将列表从无序列表更改为有序列表

我想根据列表中每个项目的条件，将无序的元素列表转换为带有删除线文本的有序列表。 有可能吗

我当前的代码：

html

<ul>
  <li v-bind:class="{ is_valid: contains_eight_characters }"> Minimum 8 Characters</li>
  <span> Include any three of the following</span>
  <li v-bind:class="{ is_valid: contains_number }">Contains Number</li>
  <li v-bind:class="{ is_valid: contains_uppercase }">Contains Uppercase</li>
  <li v-bind:class="{ is_valid: contains_lowercase }">Contains Lowercase</li>
  <li v-bind:class="{ is_valid: contains_special_character }">Contains Special Character</li> 
</ul>

我想我没有正确的语法来更新

li:before

类，在

is\u valid

属性打开之后

请告知

更新

将css更改为

ul {
        padding: 0;
        list-style-type: none;
    }
    li.is_valid:before { 
         content:"\2714\0020"; 
         text-decoration: line-through;
    } 

现在，UI如下所示：

删节没有贯穿全文

预期结果：

一旦is_valid为true，list元素将转换一个带有“check icon”而不是bullet的有序列表元素，文本将被删除

当前结果：

---

一旦“有效”为true，列表元素将转换带有“检查图标”而不是项目符号的有序列表元素，检查图标将被删除，但文本不会被删除。

如果您试图在无序列表中包含有序列表，则这是两个列表。像这样的

li.u是否有效{
文字装饰：线条贯通；
}
有效期：在{
内容：“\2714\0020”；
}

最少8个字符

包括以下任意三项：
包含数字
包含大写字母
包含小写字母
包含特殊字符

首先，将ul更改为OL 然后使用input.onKeyUp事件（javascript）检查列表，并更正每个列表项的样式

下面是一些可能有用的伪代码

var items = document.getElementById("olYouWant");
for (var x = 0; x < items.getElementsByTagName("LI").length; x++){
  items.getElementsByTagName("LI")[x].style = "text-decoration:strikethrough";
}

var items=document.getElementById（“olYouWant”）；
对于（var x=0；x

有效吗~li:before

->

li。有效吗：before

看起来您正在使用一个框架。哪一个？是vue.js吗？@code\u monk是的，是vue。js@dave我添加了图像，更改为

li。是否有效：before

未贯穿全文。这只不过是敲打了一下“滴答声”。我希望文本被删除，而不是有序列表的“勾号”。因此，将删除移动到一个块

li.is_有效{text decoration:line through；}

NO，它是一个列表。首先它是无序的，然后根据条件，它应该转换为带有勾号图标（而不是项目符号）的订单列表，并且文本应该被删除。在列表上设置有序与无序，而不是列表项。不过，您不需要更改列表类型来更改它前面的标记的外观。可以使用：：marker伪元素对其进行样式设置。试试ul：：marker{styles}，看看你从哪里得到的。

var items = document.getElementById("olYouWant");
for (var x = 0; x < items.getElementsByTagName("LI").length; x++){
  items.getElementsByTagName("LI")[x].style = "text-decoration:strikethrough";
}