在做一個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。