onToggleFinished方法中修改的是参数isFinished值，为什么会改变data里面items中的值呢？
<template>
<div id="app">
<h1>{{ title }}</h1>
<label for="newItem">
<span>新建项目</span>
</label>
<input type="text" id="newItem"
v-model="newItem" placeholder="请输入新的项目名称"
v-on:keyup.enter="onAddNewItem()" >
<button @click="onAddNewItem()">新增</button>
<br />
<h3>{{newItem}}</h3>
<div>
<ul>
<li type="none"
v-for="item in items"
v-bind:class="[liClass, {'finished':item.isFinished}]"
v-on:click="onToggleFinished(item)" >
{{ item.label }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
title: 'This is a todo list.',
items: [
{
label: 'coding',
isFinished: false
},
{
label: 'running',
isFinished: true
}
],
liClass: 'isLiClass',
newItem: ''
};
},
methods: {
onToggleFinished: function (item) {
item.isFinished = !item.isFinished;
},
onAddNewItem: function () {
// alert('新增项目中......');
console.log(this.newItem);
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = '';
}
}
}
</script>
<style>
.finished {
text-decoration: underline;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
