如果用 vueJS 显示数据或其他数据

Question

我有一个带有 vueJS 的组件，但我需要显示一个信息或其他信息，具体取决于我的 response.data 是否为空。我阅读了 vueJS 的文档，但我不知道我是怎么做到的。

<template>

<div class="panel panel-info mt-5">
            <div class="panel-heading">
                Tipo de bono actual
            </div>
                <div class="panel-body">
                    <p v-for="data in bonosUsuario" :key="data.codBono">    
                        Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/>
                        Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
                    </p>
                </div>

            </div>
        </div>
</template>

<script>

    export default {

        data() {
            return {
                bonosUsuario: [],
            };
        },
        created: function () {
            this.bonoUsuario();
        },
        methods: {
            bonoUsuario: function(){
                let url = "/getBonoUsuario";
                axios.get(url)
                    .then((response) => {
                        this.bonosUsuario = response.data;

                        console.log(response);
                    })
                    .catch((error) => console.error(error));
            },
            renovar: function(){
                let url = "/renovarBonoUsuario";
                axios.post(url)
                     .then((response) => {
                        window.location.replace(response.data);
                     })
                     .catch((error) => console.error(error));
            }
        }
    };
</script>

我有这个，我需要它：

<div class="panel-body">
                <p v-for="data in bonosUsuario" :key="data.codBono">    
                    Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/>
                    Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
                </p>
            </div>

如果 data.tipo == null 或为空，出现其他消息，如果 !empty 或 null 出现此消息

我用 v-if 打托盘，但我不知道如何应用它

更新

<div class="panel-body">
              <p v-for="data in bonosUsuario" :key="data.codBono">
                <div v-if=" data.tipo == null || data.tipo == '' ">
                  Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/> Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
                </div>
                <div v-else>
                  <p> Sin Bono activo </p> Puede contratar uno haciendo click aquí <a href="/estadoBono"><button class="btn btn-danger">Contratar</button></a>
                </div>
              </p>
            </div>

Answer 1

<div class="panel-body">
  <p v-for="data in bonosUsuario" :key="data.codBono">
    <div v-if="data.tipo">
    Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/> Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
    </div>
    <div v-else>
       // another message
    </div>
  </p>
</div>