在做一个todolist,有个按钮点击显示没有完成的todolist,思路是点击按钮方法遍历整个items，完成的item隐藏来达到显示全部未完成的item。
可是数组遍历item可以取到index值，但是无法改变css
<template>
<p id="app" >
<h1>{{title}}</h1>
<input v-model='newItem' placeholder='Add your todolist' class='inputItem' v-on:keyup.enter='addNew'>
<p class="nav">
<img src="./assets/all.png">
<img src="./assets/checkBox.png" @click='showUndo(item)'>
<img src="./assets/checkBoxF.png" @click='showDone(item)'>
<img src="./assets/delete.png" @click='deleteAll(item)'>
</p>
<ul>
<li v-for='(item,index) in items' :index="index" class='todo-line' >
<p class='view' @mouseenter='itemEnter(item)' @mouseleave='itemLeave(item)'>
<span class="checkBox"
v-on:click='toggleFinish(item)' v-bind:class='{checked:item.isFinish}'></span>
<label class='item-label' v-bind:class='{finished:item.isFinish}'>{{ index + 1}} . {{item.label}}</label>
<img class="item-delete" src="./assets/delete1.png" v-if='item.showDelete' @click='deleteTodo(item)' >
</p>
</li>
</ul>
</p>
</template><script>
import Store from './store'
export default {
data: function () {
return {
item :'',
title: 'todolist',
items: Store.fetch(),
newItem: ''
}
},
watch: {
items: {
handler: function (items) {
Store.save(items)
},
deep: true
}
},
methods: {
toggleFinish(item) {
item.isFinish = !item.isFinish
},
addNew: function () {
this.items.push({
label: this.newItem,
isFinish: false,
showDelete:false,
})
this.newItem = ''
},
itemEnter(item){
item.showDelete = true
},
itemLeave(item){
item.showDelete = false
},
deleteTodo(index){
this.items.splice(index,1)
},
deleteAll(item){
this.items.splice(item)
},
showUndo(){
var todo = this.items;
for (var i = 0;i < todo.length; i++) {
if (todo[i].isFinish == true) {
todo[i].css('display', 'none');
console.log(i)
}
}
},
}
}
</script>请问是哪里出错了吗？?真心求助
todo[i].css('display', 'none');这是JQuery改变css样式的方法呀贴出来的代码中也没有看到你有引用JQuery
Vue中如果没有引用JQuery，只能用原生JS来修改css样式
如：
vue的思想是尽量少操作DOM，尽可能的只通过改变数据来改变视图；如果想实现点击按钮时切换显示对应状态的item，可以用计算属性来筛选出对应的数据
Vue 提供了通过数据绑定样式的方案，因此其余回答都是不准确的。
一楼正解，vue应用中尽量采用数据驱动的开发模式，减少dom的操作。在DOM中关联的数据在data中提前初始化，或是在computed中有个处理，整个业务逻辑中仅仅是操作数据，从而达到响应式更新dom的目的。楼主出现的这个错误很明显是你的设置css的方式错了，去查查js或者jquery如何更改css。