目录
一、v-for-----for循环
1.vue基本使用
语法一:v-for="(元素值,索引值) in 目标结构"
语法二:v-for="元素值 in 目标结构"
语法三: v-for="(值, 键) in 目标结构"
语法四: v-for="值 in 整数"
<template>
<div id="app">
<!-- v-for 把一组数据, 渲染成一组DOM -->
<!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
<!-- 语法一
v-for="(元素值,索引值) in 目标结构"
-->
<p>学生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li>
</ul>
<!-- 语法二
v-for="元素值 in 目标结构"
-->
<p>学生详细信息</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- v-for遍历对象(了解) -->
<!-- 语法三:v-for="(值, 键) in 目标结构" -->
<p>老师信息</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for遍历整数(了解) - 从1开始 -->
<!-- 语法四: v-for="值 in 整数" -->
<p>序号</p>
<div v-for="i in count" :key="i">{{ i }}</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 lang="less"></style>
2.vue更新检测
⚫让原数组内容改变的方法, 就会导致v-for更新, 页面更新
⚫不能让原数组内容改变的方法, 返回新数组, 就不会导致v-for更新
解决方法:
可采用覆盖数组或this.$set()
<template>
<div id="app">
<!-- v-for -->
<ul>
<li v-for="index in arr" :key="index">
{{ index }}
</li>
</ul>
<button @click="revBtn">数组翻转</button>
<button @click="sliceBtn">截取数组前三个</button>
<button @click="updateBtn">更新第一个元素值</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [5, 2, 4, 1, 8, 7],
};
},
methods: {
revBtn() {
// 1.数组翻转可以让v-for更新
this.arr.reverse();
},
sliceBtn() {
// 2.slice不会更新原数组,所以不会造成v-for更新
// 解决v-for更新 -- 覆盖原始数组
let newArr = this.arr.slice(0, 3);
this.arr = newArr
},
updateBtn() {
//3.更新某个值的时候,v
// this.arr[0] = 1000;
// 解决----this.$set()
this.$set(this.arr, 0, 1000);
},
},
};
</script>
<style lang="less"></style>
让原数组内容改变的方法:
不能让原数组内容改变的方法:
3.key的值作用
⚫key值确保唯一,这里的唯一指的是key值不能随着原数据新增或者删除而发生改变
⚫如果key值给的是索引,虽然不影响使用,但是起不到优化效果
<template>
<div>
<ul>
<li v-for="obj in arr" :key="obj.id">
{{ obj.name }}
<input type="text" />
</li>
</ul>
<button @click="btn">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "老大",
id: 50,
},
{
name: "老二",
id: 31,
},
{
name: "老三",
id: 10,
},
],
};
},
methods: {
btn() {
this.arr.splice(1, 0, {
id:19,
name:"新来的"
});
},
},
};
</script>
<style lang="scss" scoped></style>
结果比较
key值为索引值:
key值为id号,不随数据增加而改变时:
二、动态style和class
1.动态class
语法::class="{类名:布尔值}"
布尔值为true时显示指定的class类,可以设置多个class属性
<template>
<div>
<!-- 语法::class="{类名:布尔值}" -->
<div :class="{red_str:bool,bgc:bool}">class类名</div>
</div>
</template>
<script>
export default {
data() {
return {
bool:true
};
},
};
</script>
<style>
.red_str{
color: red;
}
.bgc{
background-color: pink;
},
</style>
2.动态style
语法::style="{css属性名:值}
<template>
<div>
<p :style="{ color: colorStr, backgroundColor: bgcColor }">动态style</p>
</div>
</template>
<script>
export default {
data() {
return {
colorStr: "red",
bgcColor: "pink",
};
},
};
</script>
<style>
.bgc {
background-color: pink;
}
</style>
三、过滤器
方式一:全局--过滤器
任意.vue文件内直接使用
语法:vue.filter("过滤器名",值 => 处理结果)
Vue.filter("reverse", (val) => val.split("").reverse().join(""));
方式二:局部--过滤器 与data同级
只能在当前.vue文件中使用
语法:filter:{
过滤器名字(val){
return 处理后的值
}
}
filters: {
toUp(val) {
return val.toUpperCase();
}
}
};
过滤器使用:{{ 原本的值 | 过滤器名 }}
<p>原来的样子:{{ msg }}</p>
<!-- 过滤器使用:{{ 原本的值 | 过滤器名 }} -->
<p>使用翻转过滤器:{{ msg | reverse }}</p>
<p :title="msg | toUp">鼠标长停</p>
四、计算属性-computed
1.基本使用
场景:一个变量的值,需要用另外变量计算而的来
语法:
computed:{
计算属性名(){
return 值
}
}
注意:计算属性名和data属性都是变量---不能重名
<template>
<div>
<p>{{ num }}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 10,
b: 20,
};
},
computed: {
num() {
return this.a + this.b;
},
},
};
</script>
2.计算属性缓存特性
计算属性优势:带缓存
计算属性执行后,会把return值缓存起来,
依赖项(变量)不变,多次调用都是从缓存取值,此时不会执行计算属性
当依赖项发生变化,函数会“自动”重新执行,并缓存新的值
<template>
<div>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello World",
};
},
methods: {
getMessage() {
console.log("函数执行了");
return this.msg.split("").reverse().join("");
},
},
computed: {
reverseMessage() {
console.log("计算属性执行力");
return this.msg.split("").reverse().join("");
},
},
};
</script>
<style lang="scss" scoped></style>
3.计算属性完整写法
使用场景:给计算属性变量赋值时,通过v-model绑定时
语法:
computed:{
"计算属性名":{
set(值){
},
get(){
return 值
}
}
}
set()通过v-model对应的表单控制计算属性时使用
get()给计算属性赋值
<template>
<div>
<span>姓名</span>
<input type="text" v-model="full" />
</div>
</template>
<script>
export default {
/* 计算属性完整写法
使用场景:给计算属性变量赋值时
语法:
computed:{
"计算属性名":{
set(值){
},
get(){
return 值
}
}
}
*/
computed: {
full: {
// 给full赋值触发set方法
set(val) {
console.log(val);
},
//使用full值触发get方法
get() {
return "无名氏";
},
},
},
};
</script>
<style lang="scss" scoped></style>
4.全选、反选案例
<template>
<div>
<span>全选:</span>
<input type="checkbox" v-model="isAll" />
<span>反选:</span>
<input type="checkbox" v-model="isSwitch" />
<ul>
<li v-for="obj in arr" :key="obj.name">
<input type="checkbox" v-model="obj.c" />
<span>{{ obj.name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: false,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
computed: {
isAll: {
set(flag) {
// 通过v-model对应的表单控制计算属性时使用
return this.arr.forEach((item) => (item.c = flag));
},
get() {
// 给计算属性赋值
return this.arr.every((item) => item.c === true);
},
},
isSwitch: {
set(flag) {
return this.arr.forEach((item) => (item.c = !flag));
},
get() {
return this.arr.every((item) => item.c === false);
},
},
},
};
</script>
五、侦听器
1.基础侦听
newVal:当前的值
oldVal:上一刻的值
watch:{
变量名(newVal, oldVal) {
//变量名对应值改变这里自动触发
console.log(newVal, oldVal);
}
}
<template>
<div>
<input type="text" v-model="name" />
</div>
</template>
<script>
export default {
data() {
return {
name: "",
};
},
watch: {
name(newVal, oldVal) {
console.log(newVal, oldVal);
},
},
};
</script>
<style lang="scss" scoped></style>
2.深度侦听
<template>
<div>
<input type="text" v-model="user.name" />
<input type="text" v-model="user.age" />
</div>
</template>
<script>
export default {
data() {
return {
user:{
name:"",
age:0
}
};
},
watch: {
user:{
handler(newVal, oldVal){
console.log(newVal, oldVal);
},
deep:true,//深度侦听(对象里面层的值改变)
immediate:true //立即侦听(网页打开handler执行一次)
},
}
}
</script>
<style lang="scss" scoped></style>