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

1.监听属性例子1

计数器: {{ counter }}

例子2：

千米 : 米 :

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

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

也可以绑定一个对象

.active { width: 100px; height: 100px; background: green; } .text-danger { background: red; }

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

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属性

.active { width: 100px; height: 100px; background: green; } .text-danger { background: red; }?

也可以使用三元表达式来切换列表中的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 的话该属性会被移除：

【vue学习-属性监听，样式绑定v-bind】参考：http://www.runoob.com/vue2/vue-class-style.html
http://www.runoob.com/vue2/vue-watch.html