关于数据绑定的练习

最新推荐文章于 2025-08-02 14:19:41 发布

原创最新推荐文章于 2025-08-02 14:19:41 发布 · 418 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue3 专栏收录该内容

10 篇文章

订阅专栏

关于数据绑定的练习

问题

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;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

button:hover,
button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

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>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <section id="assignment">
      <!-- 1)输出你的名字 -->
      <h2>YOUR NAME</h2>
      <!-- 2) 输出你的年龄 -->
      <p>YOUR AGE</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>YOUR AGE in 5 years</p>
      <!-- 4) 输出一个0-5的随机数-->
      <p>Favorite Number: RANDOM NUMBER BETWEEN 0 AND 1</p>
      <div>
        <!-- 5) 展示一些你觉得好看的图片-->
        <img src="SOME IMAGE URL" />
      </div>
      <!-- 6) 通过“value”属性用您的姓名预填充输入字段 -->
      <input type="text" />
    </section>
  </body>
</html>

本次需要挑战的内容已经输出在HTML的文档中了，记住不要硬编码哦，需要你使用之前学过的Vue知识来完成这个挑战

解决示例

输出姓名和年龄，这很简单，直接使用插值语法解决

const app = Vue.createApp({
  data() {
    return {
      myName: 'IT知识一享',
      age: 18
    };
  }
});

app.mount('#assignment');

  <!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>

在这里插入图片描述

输出五年后的年龄

我们可以在插值语法中直接使用运算符

  <!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>{{ age + 5 }}</p>

在这里插入图片描述

我们也可以使用methods定义一个方法也可以

methods: {
    ageFive() {
      return this.age + 5;
    }
  }

<!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>五年后的年龄是{{ ageFive() }}</p>

在这里插入图片描述

生成一个随机数

同样的，我们可以在插值语法中直接运行Math的方法

<!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>五年后的年龄是{{ ageFive() }}</p>
      <!-- 4) 输出一个0-5的随机数-->
      <p>随机数: {{ Math.random() }}</p>

在这里插入图片描述

也可以使用methods方法

methods: {
    ageFive() {
      return this.age + 5;
    },
    calNum() {
      return Math.random();
    }
  }

  <!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>五年后的年龄是{{ ageFive() }}</p>
      <!-- 4) 输出一个0-5的随机数-->
      <p>随机数: {{ calNum() }}</p>

在这里插入图片描述

输出图像，关于属性，我们直接使用v-bind即可

const app = Vue.createApp({
  data() {
    return {
      myName: 'IT知识一享',
      age: 18,
      imageUrl: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.zyNSb0UXhP8TfxYbj-GNWgAAAA?w=80&h=80&c=1&bgcl=92db90&r=0&o=6&dpr=1.3&pid=ImgRC'
    };
  },

    <!-- 1)输出你的名字 -->
      <h2>{{ myName }}</h2>
      <!-- 2) 输出你的年龄 -->
      <p>{{ age }}</p>
      <!-- 3) 输出你的年龄 + 5-->
      <p>五年后的年龄是{{ ageFive() }}</p>
      <!-- 4) 输出一个0-5的随机数-->
      <p>随机数: {{ calNum() }}</p>
      <div>
        <!-- 5) 展示一些你觉得好看的图片-->
        <img v-bind:src="imageUrl" />

在这里插入图片描述

使用value对输入框的默认值进行处理，这里还是用v-bind来绑定name的属性即可

     <!-- 6) 通过“value”属性用您的姓名预填充输入字段 -->
      <input type="text" v-bind:value="myName"/>

在这里插入图片描述

后面我们将学习关于事件绑定的相关知识