vue总结(三)

目录

• 表单绑定指令
• 类绑定
• style样式绑定
• 动画

表单绑定指令

v-model
让表单的值与 数据绑定在一起

<input type=“checkbox”
默认选中值是true
不选中值是false

<input type=“checkbox” name=“fruit” v-model=“lest”
如果是多个把选中的值动态添加到list数组中

修饰符
.number数字
.trim移除两端空格

类绑定

1.属性
:class=“值”

2.对象
当对象的属性值为真，该属性作为class绑定
:class="{‘key1’:true,‘key2’:false}"
key1的值为真，key1会被绑定，key2不会

3.数组方式
:class="[c1,c2,c3]"

style样式绑定

属性名去掉 - 下个字母大写
:style="{color:‘red’,‘fontSize’:‘48px’}"

动画

1.vue动画在内置组件transition包裹

会自动在动画的进入过程与离开过程添加类名

2.内置组件

《1》transition

name名称

m