我擅长编码，我正在尝试使用 Vue.js 做一个简单的应用程序。一切似乎都正常运行，但“Nu Html Checker”中的检查发现了几个错误，例如：“Attribute @click is not serializable as XML 1.0.”，“Attribute v-for not allowed on element li at this point.”，“属性：此时元素 li 不允许使用类。”。
我尝试了几种方法，但似乎没有任何效果。非常感谢！
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>To Do List</title>
<script src="lib/js/vue.js"></script>
<link rel="stylesheet" href="lib/css/formating.css">
</head>
<body>
<div id="buerokramApp">
<h1>To Do List</h1>
<p> <label for="newTask">Neue Aufgaben</label> <input type="text" id="newTask" v-model="newTask"> <button class="nsrt" @click="nsrtTask">Insert</button> </p>
<h2>Alle Aufgaben</h2>
<ul>
<li v-for="(task, index) in tasks" :class="{'terminated' :task.fertig}">
<p>{{task.name}}</p> <button class="doneChanged" @click="doneChanged(index)">✔ </button> <button class="putAway" @click="putAway(index)">✕ </button>
</li>
</ul>
<h2>In Bearbeitung</h2>
<ul>
<li v-for="task in bearbeitung">{{task.name}}</li>
</ul>
<h2>Erledigt</h2>
<ul>
<li v-for="task in erledigt">{{task.name}} <button class="agacan" type="button" name="button">✉ </button> </li>
</ul>
</div>
<script>
var app = new Vue({
el: "#buerokramApp",
data: {
tasks: [
{name: "In Büro kommen", fertig: true},
{name: "Korrespondez lessen", fertig: false},
{name: "Morgenkreis", fertig: false},
{name: "Strafverfahren Nr.123 bearbeiten", fertig: false},
{name: "Termin in Landgericht", fertig: false},
{name: "Delegation abholen im Flughafen", fertig: false},
],
newTask: ''
},
computed:{
erledigt(){
return this.tasks.filter(task => task.fertig);
},
bearbeitung(){
return this.tasks.filter(task => !task.fertig);
},
},
methods:{
nsrtTask(){
this.tasks.push({name: this.newTask, fertig: false});
this.newTask= '';
},
putAway(index){
this.tasks.splice(index, 1);
},
doneChanged(index){
this.tasks[index].fertig = !this.tasks[index].fertig;
}
}
});
</script>
</body>
</html>