vue-语法2

class

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

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

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紧密耦合在一起


你可能感兴趣的:(vue-语法2)