今天学到了什么#

• v-bind
• v-model

v-model注意点：#

• 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
• .props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

总结：v-bind只有其中所用到的数据发生变化时，会动态将新数据的值绑到属性值上，但是当页面的属性值发生变化的时候，新的属性值不会放到数据当中

区别详解#

v-bind 和 v-model 最大区别：一个是单向绑定，一个是双向绑定（语法糖）。

1) v-bind（单向：数据 → 视图）

• 用法：v-bind:prop="expr"，简写 :prop="expr"
• 只负责把“数据的值”绑定到属性/prop 上
• 例子（你现在的）：<input :checked="isAll">
  • isAll 变了，checkbox 会跟着变
  • 但你手动点 checkbox，不会自动把结果回写到 isAll

2) v-model（双向：数据 ↔ 视图）

• 用法：v-model="xxx"
• 本质是组合：v-bind + v-on（监听输入事件回写数据）
• 对 checkbox 来说，近似等价于：

  1
  <input
  2
    type="checkbox"
  3
    :checked="xxx"
  4
    @change="xxx = $event.target.checked"
  5
  >
  

• 所以当你写 <input v-model="isAll">，用户勾选时会触发“给 isAll 赋值”，从而调用你 computed 里的 set(value)。

结合你这段代码的关键点

• 你现在写 :checked="isAll"，computed.isAll.set 永远不会被调用（因为没有发生 isAll = ... 赋值）。
• 要让 set 生效：要么改 v-model="isAll"，要么保留 :checked 但加 @change="checkAllTodo($event.target.checked)"。
• 如果用 v-model，setter 应该写 set(value)，不是 set(e)。

v-bind#

v-bind 的作用：把“表达式的值”动态绑定到 HTML 属性 / 组件 prop 上。

1
<img v-bind:src="imgUrl">
2
<input v-bind:checked="isAll">

1
<input :checked="isAll">

1
<input v-bind:checked="isAll">

1
<MyFooter :todoList="todoList" />

1
<div v-bind="{ id: boxId, title: tip }"></div>