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

Question

Wenn Sie eine Aufgabenliste erstellen, klicken Sie auf eine Schaltfläche, um die unvollendete Aufgabenliste anzuzeigen. Die Idee besteht darin, auf die Schaltfläche zu klicken, um die gesamten Elemente zu durchlaufen, und die abgeschlossenen Elemente auszublenden, um alle unfertigen Elemente anzuzeigen.
Der Indexwert kann jedoch durch Durchlaufen des Elements im Array erhalten werden, das CSS kann jedoch nicht geändert werden

<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>

Entschuldigung, was ist schief gelaufen? ?Ich bitte aufrichtig um Hilfe

Answer 1

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;
}

Answer 2

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

Answer 3

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

<template>
  <p
    :style="{ color: demo.color }"
    :class="demo.isActive ? 'active' : ''"
  >
    Demo
  </p>
</template>

<script>
export default {
  data () {
    return {
      demo: { isActive: false, color: 'red' }
    }
  }
}
</script>

Answer 4

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