020 Time to Practice Data Binding - Solution

最新推荐文章于 2024-10-18 17:49:11 发布

黄健华Yeah

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量170

点赞数 1

本文链接：https://blog.csdn.net/KevinHuang2088/article/details/141268449

版权

03 Vue3 - Udemy Top 1（完结）专栏收录该内容

307 篇文章 0 订阅

订阅专栏

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Basics</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <section id="sec">
        <h2>{{name}}</h2>
        <P>{{age}}</P>
        <p>{{calculateAge()}} in 5 years</p>
        <p>Favorite Number: {{calculateRandom()}}</p>
        <div>
            <img v-bind:src="imgUrl"/>
        </div>
        <input type="text" v-bind:value="name">
    </section>
</body>
</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            name: 'Maximilian',
            age: 31,
            imgUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2023%2F1129%2F90a6d53aj00s4vl5o003oc000z900nic.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
            
        }
    },
    methods: {
        calculateAge() {
            return this.age + 5;
        },
        calculateRandom() {
            return Math.random();
        }
    }
});

app.mount('#sec');

styles.css

* {
    box-sizing: border-box;
}

html {
    font-family: 'Jost', sans-serif;
}

body {
    margin: 0;
}

section{
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 3rem;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

h2{
    font-size: 2rem;
    border-bottom: 4px solid #ccc;
    color: #970076;
    margin: 0 0 1rem 0;
}

p{
    font-size: 1.25rem;
    font-weight: bold;
    background-color: #970076;
    padding: 0.5rem;
    color: white;
    border-radius: 25px;
}

input{
    font: inherit;
    border: 1px solid #ccc;
}

input:focus{
    outline: none;
    border-color: #1b995e;
    background-color: #d7fdeb;
}