Java基础(35)

Vu03

计算属性 Computed

计算属性主要是用于对各个状态之间进行运算，数据过滤的一种处理

<input v-model="name">
<input v-model="version">
<h1>{
  {  name + version }}</h1>  //运算结果直接拼接
<h1>{
  {  getFullAppVersionName() }}</h1>  //函数
<h1>{
  {  fullAppVersionName }}</h1>  //计算属性

<script>
  export default {
    data(){
      return {
        name : "",
        version : ""
      }
    },
    methods : {
      getFullAppVersionName(){
         return this.name + this.version
      },
      fn(){
         //方法内部可以直接通过this.访问计算属性
         console.log(this.fullAppVersionName)
      }
    },
    computed : {
      fullAppVersionName(){
        return this.name + this.version
      }
    }
  }
</script>

计算属性 VS 方法&视图表达式

计算属性是具有数据缓存的，当其依赖的状态没有发生变化时，计算属性是不会调用求值的。方法&视图表达式每次都会进行求值，并更新视图

计算属性的完整写法

<input v-model="name">
<input v-model="version">
<input v-model="fullAppVersionName">

<script>
  export default {
    data(){
      return {
        name : "",
        version : ""
      }
    },
    
    computed : {
      fullAppVersionName:{
        get(){
          //计算属性被读取时调用
           return this.name + this.version ;
        },
        set(val){
           //计算属性被赋值时调用
           this.name = val.split('v')[0]
           this.version = val.split('v')[1]
        }
      }
    }
  }
</script>

watch 数据监听

允许我们对任意一个已经注册过的状态，进行监听，如果状态值发生变化，可以进行回调处理

<span>价格： {
  { price }}</span&g