-
vue - 指令2
目录
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标签。
- <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不支持元素
- 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 +1 }}--{{item.name}}</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()方法也是响应式的;
Vue.set( target, propertyName/index, value )
-
参数：
{Object | Array}: target(对象/数组){string | number}: propertyName/index (属性名 key/下标){any} : value
(修改的目标,索引值,修改后的值 );
Vue.set(this.books,0,'西厢记') -
相关阅读:
Qt5在VS中调试时查看变量只能看到p,d指针的问题处理
政企解决方案 | 携手一线城市政企，打造可观测性国产化政务平台
【高德地图】Android搭建3D高德地图详细教
OpenStack学习笔记（二）
ubuntu下yolov5 tensorrt模型部署
java基于微信小程序的大学生心理测试 uniapp小程序
物联网-业务数据智能管理应用设计
携程apollo linux服务器安装部署及问题记录
空间复杂度（数据结构）
【刷题日记】9.移除元素
- 原文地址：https://blog.csdn.net/yuy20151225/article/details/119752948
