vue - 指令2
目录
指令(指令可以直接使用data中的数据)
v-if 条件渲染
v-show
v-if 和 v-show的区别
v-for 列表渲染
key的使用方法
v-for 和 v-if 一同使用
Vue.set( target, propertyName/index, value )
指令(指令可以直接使用data中的数据)
v-if 条件渲染
后面跟表达式;
在Vue中可以使用v-if来控制模板里元素的显示和隐藏，表达式的值为true就显示，为false就隐藏；
v-if控制的是: 是否渲染这个节点;即元素的创建和销毁；
v-if 后面跟 条件表达式, 表达式的值为真时显示,为假不显示,通常用data中一个变量来接受这个值,通过改变变量的值来控制是否显示;
v-else-if指令可以实现多分支逻辑 ;
v-else 不跟表达式 , 当v-if的表达式为假的时候显示 v-esle的元素 ;
控制一组元素显示隐藏的时候，可以用标签将其包裹，vm不会渲染template标签。
{{msg}}
{{message}}
v-show
后面跟表达式;
Vue还提供了v-show指令，根据表达式的真假值，切换元素的 display CSS 属性（dom中的行内样式）。
控制的是元素的css中display属性，从而控制元素的显示和隐藏。
Hello!
v-if 和 v-show的区别
- v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
- v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 样式的dispaly属性进行切换。
- v-if 有更高的切换开销，v-show 有更高的初始渲染开销，
- 如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
- v-show不支持元素
- v-show不支持v-else/v-else-if
v-for 列表渲染
后面跟表达式;
v-for遍历数组
- v-for="item in 数组名"
- v-for="(item,index) in 数组名"
- item,index就是一个变量名;数组就是data中的数据;
data:{ arr:['西游记','红楼梦','三国演义','水浒传'] },
- {{item}}
- {{index + 1}}--{{item}}
v-for遍历数组,数组中的是对象;
遍历的item就是每一项的对象;
index就是每一项对象的下标;
data: { arr1: [ { name: "小白", sex: "男", age: 18 }, { name: "小红", sex: "女", age: 28 }, { name: "小刚", sex: "男", age: 19 }, { name: "小龙", sex: "男", age: 20 }, ] }
- {{item.name}}
- {{item.sex}}
- {{item.age}}
- {{index +1 }}--{{item.name}}
可以利用
of替代in;
v-for遍历对象
- v-for='value in 对象'
- v-for = "(value,key,index) in 对象"
- value是对象的每一项的属性值;
- key是对象的每一项属性名;
- index是对象的下标 0 开始;
- value,key,index只是一个变量名而已,但是需要按顺序;
data:{ obj:{ name:"小白", sex:"男", age:"18", hobby:"敲代码" } },
- {{value}}
- {{key}}--{{value}}
- {{index}}--{{key}}--{{value}}
在v-for中使用数字
用法：n in num
参数：n: 数字，从1开始
v-for遍历字符串
用法：str in string
参数：str: 字符串，源数据字符串中的每一个data:{ string:'hello' }
- {{str}}
key的使用方法
官方推荐, 使用v-for的时候, 加上一个 key属性;
:key属性绑定,可以使用data中的值;
指令可以直接使用data中的数据
跟踪每个节点的身份，从而重用和重新排序现有元素 ;
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。key的作用是为了高效的更新虚拟DOM
data: { persons: ['小白', '小红', '可可', 'coco'] }
- {{ person }}
v-for 和 v-if 一同使用
永远不要把 v-if 和 v-for 同时用在同一个元素上。
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级;解决方案: 将 v-if 置于外层元素上,v-for遍历内层;
检测数组更新
Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新;
Vue中观察数据编译的方法 – 用它们改变数组会触发视图的更新;
| 数组响应式方法 | 作用 |
|---|---|
| push() | 在数组中最后增加元素;()一个或多个参数 |
| pop() | 删除数组中最后一个元素;()不跟参数 |
| shift() | 删除数组中的第一个元素;()不跟参数 |
| unshift() | 在数组最前面添加元素;()一个或多个参数 |
| splice() | 删除 / 插入 / 替换元素; () 开始下标,删除几个,新的参数 |
| sort() | 排序,里面传函数 |
| reverse() | 倒叙, |
Vue.set()方法也是响应式的;
Vue.set( target, propertyName/index, value )
参数：
{Object | Array}: target(对象/数组){string | number}: propertyName/index (属性名 key/下标){any} : value(修改的目标,索引值,修改后的值 );
Vue.set(this.books,0,'西厢记')