vue-语法2

class

class和style的绑定也是用v-bind或者：,vuejs对此做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或者数组
1.{key:value}对象语法
2.数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

<div class="active text-danger"></div>

3.用在组件上：当在一个自定义组件上使用class时，该class会被应用到该组件的根元素上，已经存在的类不会被覆盖

style

1.对象语法：样式名可以用camelCase，也可以用kebab-case（用单引号括起来）
2.数组语法
3.前缀：vue.js会自动添加前缀，如transform

条件渲染

可以将v-if放在template中，这样template不会被解析
1.v-if,v-else-if,v-else
如果v-if或v-else中有同样的元素input，可以通过对不同的input设置不同的key来独立两个元素，可见例子
2.v-show:和v-if不同的是，v-show中的dom始终在页面上，只是切换了元素的display属性
v-show 不支持template
3.v-for和v-if同时使用时，v-for的优先级更高

列表渲染v-for

• v-for 操作数组时，以下方式改变数组不会触发页面更新
  1.用索引直接修改一个项 vm.items[index]=item (改成vm.set(vm.items,index,item)就可以触发更新)
  2.直接修改数组的长度vm.items.length=100（用vm.items.splice(newLength)就可以触发更新）

• v-for可用于template上

• 在组件上使用v-for
  1.v-for可以用在组件上
  2.数据不会自动传递到组件里，因为组件有自己独立的作用域，需要用props手动的传给组件,同时也能明确组件数据的来源，而自动传值会使得组件和v-for紧密耦合在一起

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>