Vue笔记(2)

本地应用指令

v-show

根据表达式的真假，切换元素的显示和隐藏

• v-show指令的作用是:根据真假切换元素的显示状态
• 原理是修改元素的display,实现显示隐藏
• 指令后面的内容,最终都会解析为布尔值
• 值为true元素显示,值为false元素隐藏
• 数据改变之后,对应元素的显示状态会同步更新

v-if

• v-if指令的作用是:根据表达式的真假切换元素的显示状态
• 本质是通过操纵dom元素来切换显示状态
• 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
• 频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind

设置元素的属性(比如:src,title,class)

• v-bind指令的作用是:为元素绑定属性
• 完整写法是v-bind:属性名
• 简写的话可以直接省略v-bind,只保留:属性名
• 需要动态的增删class建议使用对象的方式

本地应用-图片切换

1. 定义图片数组
2. 添加图片索引
   
3. 绑定src属性(v-bind)
4. 图片切换逻辑(v-on)
5. 显示状态切换(v-show)
   
   

• 列表数据使用数组保存
• v-bind指令可以设置元素属性，比如src
• v-show和v-if都可以切换元素的显示状态,频繁切换用v-show