How to make an html tag visible when typing

I am using two way data-binding but there is something am not being able to achieve. At the moment, I have a a set of input fields, and everytime I type anything in them, the span tags next to them get filled with the data. However, I want to show the equal sign only when I start typing.

The span tag has this text: Your gross income When I start typing on the input field it should add the equal sign: Your gross income is = "the value here"

Here my current code:

<template>
<div class="row mt-5">  
    <div class="col-sm-6">
        <h4 class="mb-2">What is the maximum <br> bond I can get ?</h4>
        <div class="affordability-input">
            <input type="text" v-model="gross_income" placeholder="Enter gross income">
            <input type="text" v-model="loan_term" placeholder="Loan Term">
            <input type="text" v-model="interest_rate" placeholder="Interest Rate">
            <button class="bg-blue">Calculate</button>
        </div>
    </div>
    <div class="col-sm-6">  
        <div class="flex">
            <div>
                
            </div>
            <div class="results">
                <h4 class="mb-2">Your results</h4>
                <p>Gross monthly income = <span>{{ gross_income }}</span></p>
                <p>The transfer cost = <span>{{ loan_term }}</span></p>
                <p class="mb-3">The bond cost = <span>{{ interest_rate }}</span></p>
                <p>You qualify for</p>
                <p class="approval-price">2,500 000</p>
                <a class="bg-transparent mt-4 border" href="#">Get Pre-Approval</a>
            </div>
            
        </div>
    </div>
</div>  
</template>

<script>
    export default {
        data(){
            return{
                gross_income: '',
                loan_term: '',
                interest_rate: '' ,                 
            }
        }
    }
</script>