vue动态绑定class显示错误

Kisger
  • 7
<style>
        .done {
            color: gray;
            text-decoration: line-through;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
<div id="app">
        <input type="text" v-model="title" @keydown.enter="addTodo">
        <ul>
            <li v-for="todo in todos">
                <input type="checkbox" v-model="todo.done">
                <span :class="{ done: todo.done }">
                    {{todo.title}}
                    {{todo.done}}
                </span>
            </li>
        </ul>
    </div>
    <script>
        const App = {
            data() {
                return {
                    title: "", // 定义一个数据
                    todos: [
                        {title: '吃饭', done: 'false'},
                        {title: '睡觉', done: 'false'}
                    ]
                }
            },
            methods: {
                addTodo(){
                    this.todos.push({
                        title: this.title,
                        done: false
                    })
                    this.title = ''
                }
            }
        }
        // 启动应用
        Vue.createApp(App).mount('#app')
    </script>

大佬们,我这个动态添加todolist,发现一开始设置的值是false,但是原本带的两个值,他的class还是会显示。
image.png
但是新增的就不会出现这样的问题
image.png
该怎么操作呢,大佬们

回复
阅读 403
1 个回答

要布尔类型
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏