vue 零散记录

绑定class——对象语法和数组语法

对象语法： v-bind:class 可以与 class attribute 共存

class="red"
v-bind:class={active: isActive,'class-name':isShow}

绑定的数据可以存放在data 中，也可以放在计算属性中
数组语法： 数组语法中也可以使用对象语法

v-bind:class="[className1,className2, className3 ? className3 : '']"
v-bind:class="[className1,{active: isActive}]"

class属性也可以添加到组件上，等于追加

绑定内联样式

对象语法

:style="{background:color,top:number+'px'}"

直接绑定到一个对象上更好，让模板更清晰,也可以绑定在计算属性中

:style="styleObject"
data() {
      return {
            styleObject:{
                  color: 'red',
                  fontSize: '12px' 
            }
      }
}

数组语法--可以将多个样式对象应用到统一元素

:style="[styleObject1,styleObject2]"

v-model语法糖

v-model 是一个语法糖
<input v-model="searchText">
等价于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
当用在组件上时，v-model 则会这样：
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>