1-6 计算属性

一、计算属性

参与计算的值发生改变的时候触发 方法不会缓存,computed会根据依赖的属性(归vue管理的数据,可以实现响应式的变化)进行缓存。

Tips:computed不支持异步

1.一般通过js赋值影响其他人或者表单元素设置值的时候会调用set方法。

  <div id="app">
        价格:
        <input type="number" v-model.number="price">
        数量:
        <input type="number" v-model.number="count">
        总价:
        {{sum}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                price:10,
                count:3
            },
            computed:{
                sum(){
                    alert(1)
                    return this.price*this.count
                }
            }
        })
    </script>

二、get,set

computed属性通常是依赖于data属性，如果需要改自身，则需要在set中修改依赖的data属性

<div id="app">
        <input type="checkbox" v-model="checkState">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                checked:false
            },
            computed: {
                checkState: {
                    get() {
                        return this.checked;
                    },
                    set(val) {
                      //改变它的依赖不能直接改变它的值
                        this.checked = val
                    }
                }
            }
        })
    </script>

三、例子

<template>
  <div>
    <!-- 最多只能输入6的字符 -->
    <input type="text" v-model="word" placeholder="请输入"> {{msg}}
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return {
      word:""
    }
  },
  computed:{
    msg(){
      if(this.word.length>6){
        return "最多不能超过8的字符"
      }else if(this.word.length<3){
        return "不能少于3个字符"
      }else{
        return "合法"
      }
    }
  }
};
</script>