文章目录

• • 9.计算属性：computed
  • 10.监听属性：watch
  • 11.样式绑定
  • • 11.1 绑定class
    • • 11.1.1 对象
      • 11.1.2 计算属性
      • 11.1.3 数组
    • 11.1 绑定style
  • 12.事件处理器
  • 13.表单
  • • 13.1 文本框
    • 13.2 多选框
    • 13.3 单选框
    • 13.4 下拉框

9.计算属性：computed

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。

可以使用 methods 来替代 computed，效果是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但如果你不希望缓存，可以使用 methods 属性。

{{ message }}
{{ reversedMessage }}

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

{{ message }}
{{ reversedMessage }}

10.监听属性：watch

使用 watch 实现计数器：

计算器: {{counter}} 
点我

进行千米与米之间的换算：

千米：米：

11.样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

11.1 绑定class

11.1.1 对象

11.1.2 计算属性

11.1.3 数组

11.1 绑定style

菜鸟教程
菜鸟教程
菜鸟教程

12.事件处理器

13.表单

13.1 文本框

{{message1}}

13.2 多选框

a1a2a3
{{message1}}

13.3 单选框

13.4 下拉框