javascript - Vue 错误Uncaught TypeError: todo[i].css is not a function

问题描述

在做一个todolist,有个按钮点击显示没有完成的todolist,思路是点击按钮方法遍历整个items，完成的item隐藏来达到显示全部未完成的item。可是数组遍历item可以取到index值，但是无法改变css

<template> <p > <h1>{{title}}</h1> <input v-model=’newItem’ placeholder=’Add your todolist’ class=’inputItem’ v-on:keyup.enter=’addNew’> <p class='nav'> <img src='https://www.haobala.com/wenda/assets/all.png'> <img src='https://www.haobala.com/wenda/assets/checkBox.png' @click=’showUndo(item)’> <img src='https://www.haobala.com/wenda/assets/checkBoxF.png' @click=’showDone(item)’> <img src='https://www.haobala.com/wenda/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 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 src='https://www.haobala.com/wenda/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样式

如：

todo[i].style.display = ’none’// 或todo[i].setAttribute(’display’, ’none’)// 或todo[i].className = ’newClass’.newClass { display: none;}回答2：

vue的思想是尽量少操作DOM，尽可能的只通过改变数据来改变视图；如果想实现点击按钮时切换显示对应状态的item，可以用计算属性来筛选出对应的数据

Vue 提供了通过数据绑定样式的方案，因此其余回答都是不准确的。

<template> <p : : > Demo </p></template><script>export default { data () { return { demo: { isActive: false, color: ’red’ } } }}</script>回答4：

一楼正解，vue应用中尽量采用数据驱动的开发模式，减少dom的操作。在DOM中关联的数据在data中提前初始化，或是在computed中有个处理，整个业务逻辑中仅仅是操作数据，从而达到响应式更新dom的目的。楼主出现的这个错误很明显是你的设置css的方式错了，去查查js或者jquery如何更改css。