vue指令-v-for
列表渲染,所在标签结构,按照数据数量,循环生成语法:v-for = “(值 , 索引)in 目标元素”v-for = "值 in 目标结构"目标结构可以遍历数组、对象、数字、字符串(可遍历结构)注意:v-for的临时变量不能用到v-for范围以外谁需要循环循环添加给谁加v-for<template><div><ul><!-- v-for="(值的变量名,索
列表渲染,所在标签结构,按照数据数量,循环生成
语法:
- v-for = “(值 , 索引)in 目标元素”
- v-for = "值 in 目标结构"
目标结构
- 可以遍历数组、对象、数字、字符串(可遍历结构)
注意:
v-for的临时变量不能用到v-for范围以外
谁需要循环循环添加给谁加v-for
<template>
<div>
<ul>
<!-- v-for="(值的变量名,索引名) in 目标结构" -->
<li v-for="(item, index) in arr" :key="index">
{{ item }} --- {{ index }}
</li>
</ul>
<!-- 对象 -->
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span> {{ obj.name }}</span>
<span> {{ obj.sex }}</span>
<span> {{ obj.hobby }}</span>
</li>
</ul>
<div>
<p v-for="(value, key) in tObj" :key="key">
<!-- key name age class -->
<span>{{ key }}</span>
<!-- 小黑 -->
<span>{{ value }}</span>
</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小欢欢", "大黄"],
stuArr: [
{
id: 1001,
name: "孙悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "猪八戒",
sex: "男",
hobby: "背媳妇",
},
],
tObj: {
name: "小黑",
age: 18,
class: "1期",
},
count: 10,
};
},
};
</script>
<style>
</style>
$set 改变原始数组
这些方法会触发数组改变, v-for会监测到并更新页面
-
push()
往数组最后面添加数据 -
pop()
删除数组最后面的数据 -
shift()
删除数组最前面的数据 -
unshift()
往数组最前面添加数据 -
splice()
替换数据 -
sort()
冒泡 -
reverse()
颠倒数组的顺序
这些方法不会触发v-for更新
-
slice()
截取数组的指定长度 -
filter()
返回筛选后需要的数据 -
concat()
方法用于连接两个或多个数组。
注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组
改变原数组的方法才能让v-for更新
vue基础_虚拟dom
.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
虚拟DOM是一个对象 保存了标签的属性、内容和信息
好处1:提高了更新DOM的性能(不用把页面全删除重新渲染)
好处2:虚拟DOM只包含必要的属性(没有把真实的DOM上百个属性)
好处3:只需要遍历一次
总结: 虚拟DOM保存在内存中, 只记录dom关键信息, 配合diff算法提高DOM更新的性能
vue基础_diff算法
情况1: 根元素变了, 删除重建
情况2: 根元素没变, 属性改变, ==元素复用==, 更新属性
vue基础_diff算法-key
diff算法比较新旧虚拟DOM?
- 根元素改变 — 删除当前DOM树重新建
- 根元素为改变,属性改变 — 更新属性
- 根元素为改变,子元素/内容改变
- 无key — 就地更新 / 有key — 按key比较
vue基础 动态class
用v-bind给标签class设置动态的值
语法
- :class="{类名:布尔值}"
<template>
<div>
<!-- 语法:
:class="{类名: 布尔值}"
使用场景: vue变量控制标签是否应该有类名
-->
<p :class="{red_str:boll}">动态添加class</p>
</div>
</template>
<script>
export default {
data () {
return {
boll:true
}
}
}
</script>
<style>
.red_str{
color: red;
}
</style>
vue基础-动态style
给标签动态设置style的值
语法
:style ="{{css属性 : 值}}"
<template>
<div>
<!-- 动态style语法
:style="{css属性名: 值}"
-->
<p :style="{backgroundColor: colorStr}">动态style</p>
</div>
</template>
<script>
export default {
data(){
return {
colorStr: 'red'
}
}
}
</script>
<style>
</style>
总结: 动态style的key都是css属性名
更多推荐
所有评论(0)