Vue(三)

Vue3计算属性

computed函数

与vue2中的computed配置功能一致

import {computed} from 'vue'

setup(){
 简写：
 
 let fullName = computed(()=>{
  return person.firstName + '-' person.lastName
 })
 
 完整：
 
 let fullName = computed({
   get(){
    return  person.firstName + '-' person.lastName
   },
   set(v){
   const nameArr = v.split('-')
   person.firstName =nameArr[0]
   person.lastName =nameArr[1]
   
   }
 })
}

一个利用计算属性写的小Demo(全选和不全选)

<template>

  <input type="checkbox" v-model="isChecked" /> 全选/全不选
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="checkAllList" :value="item.value" />{{
        item.value
      }}
    </li>
  </ul>
</template>

<script>
import { ref, computed, reactive, toRefs } from "vue";
export default {
  name: "",
  setup() {
   

    // 计算属性练习
    let checkAll = ref(false);
    let checkAllList = reactive({
      checkAllList: [],
    });
    let data = reactive({
      list: [
        { value: "html", label: "true" },
        { value: "css", label: "true" },
        { value: "js", label: "true" },
        { value: "vue", label: "true" },
      ],
    });
    // let isChecked = computed(
    //   () => checkAllList.checkAllList.length === data.list.length //单独写不需要return
    // );
    let isChecked = computed({
      get() {
        return checkAllList.checkAllList.length === data.list.length;
      },
      set(v) {
        v
          ? (checkAllList.checkAllList = data.list.map((item) => item.value))
          : (checkAllList.checkAllList = []);
      },
    });
    return {

      checkAll,
      ...toRefs(checkAllList),
      ...toRefs(data),
      isChecked,
    };
  },
};
</script>

<style></style>