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>