Vue
HTML
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="(todo,index) in todos.data" :key="index">
{{todo.text}}
</li>
<button @click="del">删除</button>
</ol>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
data: {
todos:
{
data:[
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
]
}
},
methods: {
del(){
this.todos.data.splice(1,1)
/* this.$set(this.todos, 'questionDetails', this.todos.splice(1,1)) */
/* this.$forceUpdate() */
}
}
})