Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejercicio Javascript</title>
    <script src="./vue.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
        }

        div {
            margin: 80px 30px 80px 80px;
            padding: 60px;
            border: 1px solid black
        }
    </style>
</head>

<body>
    <div id="grosor">
        <h1>Comprobar rueda</h1>
        <form>
            <p>
                <label for="diametro">Introduce el diametro: </label>
                <input type="number" id="diametro" placeholder="diametro" v-model="diametro">
            </p>
            <p>
                <label for="grosor">Introduce el grosor: </label>
                <input type="number" id="grosor" placeholder="grosor" v-model="grosor">
            </p>
        </form>
        <p class="total" v-if="diametro != 0">
            <span>{{comDiametro()}}</span>
            <span v-if="grosor != 0">{{comGrosor()}}</span>
        </p>
    </div>

    <div id="media">
        <h1>Calcular media</h1>
        <form>
            <p>
                <label for="num1">Nota 1: </label>
                <input type="number" id="num1" v-model="num1" placeholder="nota">
            </p>
            <p>
                <label for="num2">Nota 2: </label>
                <input type="number" id="num2" v-model="num2" placeholder="nota">
            </p>
            <p>
                <label for="num3">Nota 3: </label>
                <input type="number" id="num3" v-model="num3" placeholder="nota">
            </p>
        </form>
        <span>
            <p>Media: {{calcularMedia()}}</p>
        </span>
    </div>

    <script>
        new Vue({
            el: "#grosor",
            data: {
                grosor: "",
                diametro: "",
            },
            methods: {
                comDiametro: function (grosor, diametro) {
                    if (this.diametro > 1.4) {
                        return "La rueda es para un vehículo grande "
                    } else if (this.diametro <= 1.4) {
                        return "La rueda es para un vehículo mediano"
                    } else {
                        return "La rueda es para un vehículo pequeño"
                    }
                },
                comGrosor: function (grosor, diametro) {
                    if (this.diametro > 1.4 && this.grosor < 0.4 || this.diametro <= 1.4 && this.diametro >=
                        0.8 && this.grosor < 0.25) {
                        return "y el grosor para esta rueda es inferior al recomendado"
                    }
                }
            }
        })

        new Vue({
            el: "#media",
            data: {
                num1: "",
                num2: "",
                num3: "",
                num4: 0,
            },
            methods: {
                calcularMedia: function (num4, num1, num2, num3) {
                    this.num4 = (parseInt(this.num1) + parseInt(this.num2) + parseInt(this.num3)) / 3
                    return this.num4
                }
            }
        })
    </script>
</body>

</html>