先看一下 computed,这个东西与methods这些事同级的,主要是为了处理一些页面上需要展示的数据,这样写看起来更直观,比直接 {{ todos.length }} 这样去写看起来好辨认多了
computed: { //处理页面中展示的一些数据
todoCount(){
return this.todos.length;
}
},
再看一下 v-bind:class,有两种写法
v-bind:class="{ 'completed' : todo.completed }" //这个前面是calss名,后面是判断条件
v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']" //这个就是个三目运算符
来看一下例子,还是在之前的基础上写的
欢迎啊!
MY todos {{ todos.length }} {{ todoCount }}
-
{{ todo.title }}
总的来说 v-bind:class 用的还是挺多的,可以去官网看看文档