【Vue3 从入门到实战 进阶式掌握完整知识体系】034-Composition API:computed方法生成计算属性

文章目录

    • 5、computed方法生成计算属性
      • 简单使用
      • 运行结果
      • 计算属性内使用get和set方法
      • 运行结果
      • 使set接收参数
      • 运行结果
      • 使用对象
      • 运行结果

5、computed方法生成计算属性

简单使用


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环title>
  
  <script src="https://unpkg.com/vue@next">script>
head>

<body>
  <div id="root">div>
body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      const computedNum = computed(() => {
        return num.value + 5;
      });
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    
{{num}} -- {{computedNum}}
`
}); const vm = app.mount('#root');
script> html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】034-Composition API:computed方法生成计算属性_第1张图片

计算属性内使用get和set方法


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环title>
  
  <script src="https://unpkg.com/vue@next">script>
head>

<body>
  <div id="root">div>
body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return num.value + 5;
        },
        set: () => {
          // 注意这里我们改的是 num
          num.value = 100;
        }
      });
      // 定时器:三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    
{{num}} -- {{computedNum}}
`
}); const vm = app.mount('#root');
script> html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】034-Composition API:computed方法生成计算属性_第2张图片

使set接收参数


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环title>
  
  <script src="https://unpkg.com/vue@next">script>
head>

<body>
  <div id="root">div>
body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return num.value + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
          num.value = parameter - 5;
        }
      });
      // 定时器:三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1000;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    
{{num}} -- {{computedNum}}
`
}); const vm = app.mount('#root');
script> html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】034-Composition API:computed方法生成计算属性_第3张图片

使用对象


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环title>
  
  <script src="https://unpkg.com/vue@next">script>
head>

<body>
  <div id="root">div>
body>

<script>

  const app = Vue.createApp({
    setup(){
      const { reactive, computed } = Vue;
      const numObj = reactive({num: 0});
      function handleClick(){
        numObj.num ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return numObj.num + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
          numObj.num = parameter - 5;
        }
      });
      // 定时器:三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1000;
      }, 3000);
      return {
        numObj, handleClick,computedNum
      }
    },
    template: `
    
{{numObj.num}} -- {{computedNum}}
`
}); const vm = app.mount('#root');
script> html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】034-Composition API:computed方法生成计算属性_第4张图片

你可能感兴趣的:(Vue.js,vue)