{{title}} _返回导航

鼠标放在此处查看当前时间

---

随机给分优秀

随机给分及格

随机给分不及格

---

下面是我的车：

• {{car.name}}

---

反转下方文本

{{hello}}

---

双向绑定：

---

父组件遍历，向子组件传值：

---

只插值一次：{{onceText}} 点我也不变

---

直接渲染：{{htmlStr}}

添加v-html指令渲染：

---

阻止表单默认提交：

---

建议：用计算属性替换复杂的插值表达式

hello world反转：{{reversedHello}}

---

watch的使用：

---

利用计算属性绑定class：isSuccess == true

利用数组绑定class：[{success: isSuccess}, 'bold']

---

在子组件上绑定class，原有class不会被覆盖掉

---

---

v-show和v-if的区别：

v-show操作display属性，会正常渲染保留在DOM中。初次渲染开销大，频繁切换开销小。

v-if控制元素是否进入DOM渲染，初次渲染开销小，频繁切换开销大

注：v-if和v-for一起使用时，v-for具有更高优先级

---

v-for细节

(item, index) in/of Array

(value, key, index) in Object

{{index}}

{{key}}

{{value}}

---

通过以下方式修改数组，不触发Vue检测

• {{car.name}}

通过 array[array.length]] = newItem 加车
通过 array.length-- 减车

---

v-for="i in 10"

i：{{i}}