【从0到项目实战 vue3+vite】5. vue3基础-计算属性

---

开始

还原App.vue为如下

<script setup>

</script>

<template>
  
</template>

<style scoped>

</style>

运行项目

yarn dev

浏览器打开http://localhost:5173/

为一片空白,则为下面的教程做准备

---

---

---

计算属性

简单使用

• 完整代码

<script setup>
import { ref,computed } from 'vue';

const a = ref(0)

const style = computed(()=>{
  if(a.value % 2 == 0){
    return {
      color: "#ff0000",
      border: '5px solid #ff0000'
    }
  }else{
    return {
      color: "#00ff00",
      border: '5px solid #00ff00'
    }
  }
})

const text = computed(()=>{
  if(a.value % 2 == 0){
    return 'a 为偶数'
  }else{
    return 'a 为奇数'
  }
})

</script>

<template>
  <h1>text的值为: {{ text }}</h1>
  <h1 :style="style">style的值为: {{ style }}</h1>
  <input type="number" v-model='a' />
</template>

<style scoped>
input{
  font-size: 20px;
}
</style>

• 显示
  

自定义getter，setter

• 完整代码

<script setup>
import { ref,computed } from 'vue';

const a = ref(0)

const style = computed(()=>{
  if(a.value % 2 == 0){
    return {
      color: "#ff0000",
      border: '5px solid #ff0000'
    }
  }else{
    return {
      color: "#00ff00",
      border: '5px solid #00ff00'
    }
  }
})

const text = computed(()=>{
  if(a.value % 2 == 0){
    return 'a 为偶数'
  }else{
    return 'a 为奇数'
  }
})

const ipt_text = ref('')

const ipt_model = computed({
  set:(val)=>{
  	// a == 输入值字符串的长度
    a.value = val.length
    ipt_text.value = val
  },
  get:()=>{
    return ipt_text.value
  }
})

</script>

<template>
  <h1>a的值为: {{ a }}</h1>
  <h1>ipt_model的值为: {{ ipt_model }}</h1>
  <h1>ipt_text的值为: {{ ipt_text }}</h1>
  <h1>text的值为: {{ text }}</h1>
  <h1 :style="style">style的值为: {{ style }}</h1>
  <input v-model='ipt_model' />
</template>

<style scoped>
input{
  font-size: 20px;
}
</style>

• 显示