vue第三天系统学习笔记

属性绑定
1.vue如何动态绑定属性
v-bind 指令用法：
< a v-bind:herf=‘url’>跳转</ a>
缩写形式
< a :herf=‘url’>跳转</ a>

2.v-model的底层实现原理分析
< input :value=‘msg’ v-on:input=‘msg = $event.target.value’></>

3样式绑定
（1） class样式处理
对象语法
< div :class = “{active:isActive}”></ div>
数组语法
< div :class = [activeClass,errorClass]></ div>
相关语法细节
1对象绑定和数组绑定可以结合使用
2class绑定的值可以简化操作
3默认的class如何处理

（2）style样式处理
对象语法
< div :style = “{active:isActive}”></ div>
数组语法
< div :style = “[baseStyle:overridingStyle}”></ div>

4.分支循环结构
1分支结构
v-if
v-else
v-else-if
v-show 原理： 控制元素样式是否显示 （display：none）
v-if和v-show的区别：
v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面上）