<style>
.completed{
color:#1ec01e;
text-decoration: line-through;
}
</style>
<div id="app">
<h1>@{{todoCount}}</h1> {{--实时计算computed--}}
<ul>
<li v-bind:class="{'completed':todo.completed}" v-for="(todo,index) in todos">@{{todo.title}} {{--v-bind:class completed为true改变为顶部style的样式--}}
<button v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']" @click="toggleCompletion(todo)">{{--按钮绑定toggleCompletion(todo)事件--}}
@{{todo.completed ? 'undo' : 'completed'}}</button>
<button @click="deleteTodo(index)">delete</button>
</li>
</ul>
<form @submit.prevent="addTodo(newTodo)">
<input type="text" v-model="newTodo.title">
<button value="submit">add</button>
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
todos:[{id:1,title:1,completed:false},{id:2,title:2,completed:false}],
newTodo:{id:null,title:'',completed:false}//先定义 completed为 false
},
computed:{ todoCount(){ return this.todos.length;} //实时计算todoCount的值
},
methods:{
addTodo(newTodo){
this.todos.push(newTodo)
this.newTodo={id:null,title:''}//重置输入框内容为空
},
deleteTodo(index){
this.todos.splice(index,1)
},
toggleCompletion(todo){
todo.completed=!todo.completed
},//触发false变true
},
})
</script>
vue2.0 computed和v-bind:class
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate...
