您现在的位置是:自如初>Vue.jsVue.js

Vue3 setup中computed计算属性的使用

温新 2021-08-22 19:40:37 Vue.js 9407人已围观

简介Vue3 setup中computed计算属性的使用。在setup中,要使用computed计算属性就必须先导入computed。

hi,我是温新,一名PHPer

在setup中,要使用computed计算属性就必须先导入computed。

setup中计算属性的基础使用

<div id="app">
<button @click="addCount">{{ count }}</button>
<p>计算属性后的值:{{ countComputed }}</p>
</div>

<script>
const app = Vue.createApp({
 setup() {
  const {ref, computed} = Vue;
  let count = ref(0);

  let addCount = () => {
   count.value+=1;
  }

  // 计算属性
  let countComputed = computed(()=>{
   // 计算属性初始化加10
   return count.value + 10;
  });

  return {count,addCount, countComputed}
 }
});
const vm = app.mount('#app');
</script>

setup中计算属性中的get/set

使用get/set时,computed传入的参数就是一个对象了。

<div id="app">
<button @click="addCount">{{ count }}</button>
<p>计算属性后的值:{{ countComputed }}</p>
</div>

<script>
const app = Vue.createApp({
 setup() {
  const {ref, computed} = Vue;
  let count = ref(0);

  let addCount = () => {
   count.value+=1;
  }

  // 计算属性
  let countComputed = computed({
   // 获取数据时调用
   get: () => {
    return count.value + 10;
   },
   // 设置数据时调用
   set: () => {
    return count.value = 20;
   }
  });

  // 3秒后对数据进行修改
  setTimeout(()=>{
   countComputed.value = 30;
  },3000);

  return {count,addCount, countComputed}
 }
});
const vm = app.mount('#app');
</script>


我是温新

每天进步一点,就一点点

很赞哦!(30)

文章评论

登录 注册

自如初--时间轴

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

RSS: RSS

站点信息