computed 计算属性的交互使用

[图片上传中...(image.png-7aa397-1593328047710-0)]

看上面图片，我在项目中遇到这个场景，当手机号码和位数和正确时候，就让获取验证码这几个字变后色

image.png

html

<template>
      <div>
                    <div class="phone"> <input type="text" v-model="phone" placeholder="手机号">
                        <span class="yzm"><span :class="{codered:codetf}"> 获取验证码</span> </span>
                    </div>
                    <div class="phone"> <input type="text" placeholder="验证码"></div>
               
            </div>
</template>

<script>

import headerTop from './../../components/header/headerTop'

export default {
    components:{
        headerTop
    },
        data(){
        return{
              active:'', 
              phone:'',//手机号码
        }
    },
    //计算属性
    computed:{ 
                //获取验证 计算属性
            codetf(){
                if(this.phone.length>=11){
                    console.log('手机号码位数正确')
                    return true;
                }else{
                    console.log('手机号码位数错误')
                    return false
                }
            }
    }
    
  


}
</script>

结果图片:当你输入的手机号码位数达到 11位的时候，就能让获取验证码达到红色。

image.png