2回答

慕用8519284

提问者

2019-02-28

TodoList.vue代码：

<template>

<div class="dv">

<input @keyup.enter="handlclick" type="text" v-model="mytodo">

<button @click="handlclick">添加</button>

<p v-if="shoudshow">{{subtext}}</p>

<ul>

<li :key="index" :class="{'done':todo.done}" @click="toggle(index)" v-for="(todo,index) in todos">{{index+1}}---{{todo.text}}</li>

</ul>

<p>{{remain}}</p>

</div>

</template>

<script>

export default{

data () {

return {

title: 'hello',

subtext: 'work',

shoudshow: false,

todos: [{text: '吃饭', done: false}, {text: '吃', done: false}, {text: '饭', done: false}],

mytodo: ''

}

},

computed: {

remain: function () {

return this.todos.filter(value => !value.done).length

}

},

methods: {

handlclick: function () {

this.title = 'hello wxss'

console.log({text: this.mytodo, done: false})

this.todos.push({text: this.mytodo, done: false})

},

toggle: function (i) {

this.todos[i].done = !this.todos[i].done

console.log('fdsaf')

}

}

}

</script>

<style>

li.done{

text-decoration: line-through;

color:red;

}

.dv{

width:100rem;

height:100rem;

background-color:green;

}

</style>

index.vue代码：

<template>

<div>

<h1>vuejs is good</h1>

<button>添加</button>

<TodoList></TodoList>

</div>

</template>

<script>

import Todolist from '@/components/TodoList'

export default{

components: {

Todolist

},

methods:{

add:function(){

}

}

}

</script>

<style>

h1{

color:red;

margin-bottom: 100px

}

</style>

麻烦蜗牛老湿看下

0

0

慕瓜8449030

2019-02-28

能截下图看代码吗，有声明todolist这个component配置了吗

0

2

慕用8519284

找到原因了，单词写错了蛋疼

2019-02-28

共2条回复