指令(指令可以直接使用data中的数据)
?v-if? 条件渲染
后面跟表达式;
在Vue中可以使用v-if来控制模板里元素的显示和隐藏，表达式的值为true就显示，为false就隐藏；
v-if控制的是: 是否渲染这个节点;即元素的创建和销毁；
v-if 后面跟 条件表达式, 表达式的值为真时显示,为假不显示,通常用data中一个变量来接受这个值,通过改变变量的值来控制是否显示;
v-else-if指令可以实现多分支逻辑 ;
v-else 不跟表达式 , 当v-if的表达式为假的时候显示 v-esle的元素 ;
控制一组元素显示隐藏的时候，可以用<template>标签将其包裹，vm不会渲染template标签。
<h3 v-if="isShow">{{msg}}</h3>
<p v-else>{{message}}</p>
v-show
后面跟表达式;
Vue还提供了v-show指令，根据表达式的真假值，切换元素的 display CSS 属性（dom中的行内样式）。
控制的是元素的css中display属性，从而控制元素的显示和隐藏。
<h1 v-show="ok">Hello!</h1>
v-if 和 v-show的区别
- ??? v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
- v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 样式的dispaly属性进行切换。
- ? v-if 有更高的切换开销，v-show 有更高的初始渲染开销，
- 如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
- ??? v-show不支持<template>元素
- ??? v-show不支持v-else/v-else-if
?
?v-for 列表渲染
后面跟表达式;
v-for遍历数组
- v-for="item in 数组名"
- v-for="(item,index) in 数组名"
- item,index就是一个变量名;数组就是data中的数据;
<ul>
<li v-for="item in arr">{{item}}</li>
<li v-for="(item,index) in arr">{{index + 1}}--{{item}}</li>
</ul>
data:{
arr:['西游记','红楼梦','三国演义','水浒传']
},
v-for遍历数组,数组中的是对象;
遍历的item就是每一项的对象;
index就是每一项对象的下标;
<ul>
<li v-for="item in arr1">{{item.name}}</li>
<li v-for="item in arr1">{{item.sex}}</li>
<li v-for="item in arr1">{{item.age}}</li>
<li v-for="(item,index) in arr1">{{index}}--{{<item class="name"></item>}}</li>
</ul>
data: {
arr1: [
{ name: "小白", sex: "男", age: 18 },
{ name: "小红", sex: "女", age: 28 },
{ name: "小刚", sex: "男", age: 19 },
{ name: "小龙", sex: "男", age: 20 },
]
}
可以利用of替代in;
<div v-for="item of arr"></div>
v-for遍历对象
- v-for='value in 对象'
- v-for = "(value,key,index) in 对象"
- value是对象的每一项的属性值;
- key是对象的每一项属性名;
- index是对象的下标 0 开始;
- value,key,index只是一个变量名而已,但是需要按顺序;
<ul>
<li v-for="value in obj">{{value}}</li>
<li v-for="(value,key) in obj">{{key}}--{{value}}</li>
<li v-for="(value,key,index) in obj">{{index}}--{{key}}--{{value}}</li>
</ul>
data:{
obj:{
name:"小白",
sex:"男",
age:"18",
hobby:"敲代码"
}
},
在v-for中使用数字?
用法：n in num
参数：n: 数字，从1开始
<div>
<span v-for="n in num">{{ n }} </span>
</div>
data: {
num: 10
}
v-for遍历字符串
用法：str in string
参数：str: 字符串，源数据字符串中的每一个
<ul>
<li v-for="str in string">{{str}}</li>
</ul>
data:{
string:'hello'
}
key的使用方法
官方推荐, 使用v-for的时候, 加上一个 key属性;
:key属性绑定,可以使用data中的值;
指令可以直接使用data中的数据
跟踪每个节点的身份，从而重用和重新排序现有元素 ;
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。
key的作用是为了高效的更新虚拟DOM
<ul id="app">
<li v-for="(person, index) in persons" :key="person">
{{ person }}
</li>
</ul>
data: {
persons: ['小白', '小红', '可可', 'coco']
}
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()方法也是响应式的;
-
参数：
{Object | Array}:? target (对象/数组){string | number}:? propertyName/index (属性名 key/下标){any} : value
(修改的目标,索引值,修改后的值 );
Vue.set(this.books,0,'西厢记')
|