vue学习-属性监听，样式绑定v-bind

1.监听属性

例子1

    
计数器: {{ counter }}
    点我

例子2：

      

         千米 : 
         米 : 
      
	   

      
   

2.样式绑定

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
(1)class属性绑定：

也可在对象中传入更多属性用来动态切换多个 class 。

也可以绑定一个对象

也可以在这里绑定返回对象的计算属性(方法)。这是一个常用且强大的模式：

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

(2)数组语法
一个数组包含多个class属性

    


​

也可以使用三元表达式来切换列表中的class属性

    


​

(3)style内联样式

    
菜鸟教程

也可以直接绑定到一个对象上

  
菜鸟教程

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

  
菜鸟教程

​

v-bind,v-model注意：
1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=“表达式”
2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令：

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

Button

参考：http://www.runoob.com/vue2/vue-class-style.html
http://www.runoob.com/vue2/vue-watch.html