Vue快速入门（二）

双向数据绑定
双向数据绑定一般发生在input、select、textarea这些表单元素中，当接收到输入值后，其他地方可以直接实时的显示输出值。可以使用v-model指令实现双向绑定。

  

    
双向数据绑定 / input / select / textarea
    姓名：
    
    
{{ name }}
  

这样，当在input中输入内容后，p标签中的name会实时显示。

---

计算属性computed
计算属性有缓存机制，更加优化。
而函数则每次调用都会执行。

  

    
computed 计算属性
    add to A
    add to B
    
A - {{ a }}
    
B - {{ b }}
    
Age + A = {{ addToA }}
    
Age + B = {{ addToB }}
  

---

动态绑定CSS样式
Vue使用v-bind:class或者:class来动态绑定样式。

  

    
动态CSS class
    
示例1
    

      Henry
    

    
示例2
    

      Henry
    

  

---

条件渲染：v-if, v-show

  

    
v-if指令
    Toggle Error
    Toggle Success

    
网络连接错误：404
    
网络连接成功

    
网络连接错误：404
    
网络连接成功
  

---

v-for

  

    
v-for指令
    

      
{{ character }}
    
    

    

      

        {{ index }} - {{ user.name }}, {{ user.age }}
      
    
  

github-fundamental源码

github-demo源码