Vue官网todoMVC示例代码

@click="selectAllTodos">
</span>
<input type="text" class="todos_add" placeholder="What needs to be done?"
@keyup.enter="addTodo($event.target)"
ref="currentInput">
<ul class="content_todoLists">
<li v-for="(list,index) in todoLists" class="content_todoList"
@mouseover="list.isActive = true"
@mouseleave="list.isActive=false"
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<input type="checkbox" class="checkBox" v-model="list.isChecked">
<div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input"
v-model="list.value"
v-show="list.isEditing"
v-todo-focus="list.value"
@blur="unEdit(list)">
<span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>
</li>
</ul>
<div class="data" v-show="todoLists.length>0">
<div class="data_times" v-show="times === 0">
<span>{{times}}</span>&nbspitem left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>&nbspitems left
</div>
<div class="data_status">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">
{{item}}
</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
todoLists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
computed: {
times() { //使用计算属性计算待办todos的次数
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {