VUE3 学习笔记（5）：数组处理、计算属性与函数、class与Style绑定

数组监测处理方法

VUE 提供了关于数组处理的直接方法，但并非全部都是可以处理的

如下可以直接处理：

.push --向数组中增加

.pop --从数组中最后减去一个元素

.shift --从数组中第一个减去一个元素

.unshift --在数组中的头部添加一个元素

.splice --自定义删除 元素

.sort --元素排序

.reverse --元素排序互换

如下不可以，需要获取后再重新赋值

.concat --数组合并

.filter --过滤数组

.slice --根据条件获取一个新数组

示例

<template><div><p v-for="item in numList" :key="item" >{{item}}</p><button @click="add">add</button><button @click="add2">add2</button></div>
</template><script>export default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{add(){this.numList.push(6);},add2(){//this.numList.concat([7]) //无法直接绑定this.numList = this.numList.concat([7])//需要如此处理才可以}}}
</script>

计算属性与自定义函数

计算属性与函数（事件）都可以达到相同的目标，但是计算属性则是执行一次，而函数每次调用都会执行，所以场景不同，采取方式也不同。

示例代码

<template><div><!--  直接使用计算属性调用只调用一次  --><p>{{computeIsOK}}</p><!--  但是方法则每次调用都会计算  --><p>{{changeIsOk()}}</p></div>
</template><script>export default {data(){return{msg:"test",numList:[1,2,3,4,5,6,7,8,9,10],isOk:true}},computed:{computeIsOK(){return this.isOk ? "ok" : "no"}},methods:{changeIsOk(){return this.isOk ? "ok" : "no"}}}
</script>

Class 与Style绑定

无论是绑定Class 还是绑定Style，尽管可以通过字符串的方式定义与通过数组进行定义，但还是推荐通过绑定对象进行实现.但Style 权重太高，所以一般情况下都是绑定Class 实现内联样式。

绑定Style 示例

<template><div><p :style="classDemo">{{ msg }}</p></div>
</template><script>export default {data(){return{msg:'hello world',classDemo:{'active':true,'text-danger':true,'color':'red','font-size':'40px'}}}}
</script>

绑定Class 示例 （依赖Style）

<template><div><p :class="classDemo">{{ msg }}</p></div>
</template><script>export default {data(){return{msg:'hello world',classDemo:{'active':true}}}}
</script>
<style>.active{color: red;font-size: 40px;}
</style>