前端随笔：HTML/CSS/JavaScript和Vue

作者：System 时间：2024年08月21日分类：所有,vue.js 字数：1298

这篇文章距离上次修改已过236天，其中的内容可能已经有所变动。

以下是一个简单的Vue应用示例，它展示了如何使用Vue的模板语法、计算属性和方法来处理用户输入，并动态更新DOM。

<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
  <style>
    #app { text-align: center; }
    .input-group { margin-bottom: 10px; }
    .input-group input { margin: 0 10px; }
  </style>
</head>
<body>
  <div id="app">
    <div class="input-group">
      <input type="text" v-model="firstName" placeholder="First Name">
      <input type="text" v-model="lastName" placeholder="Last Name">
    </div>
    <div>
      <button @click="greet">Greet</button>
    </div>
    <div v-if="greeting">
      <p>{{ fullName }}</p>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: '',
        greeting: ''
      },
      computed: {
        fullName: function() {
          return this.firstName + ' ' + this.lastName;
        }
      },
      methods: {
        greet: function() {
          this.greeting = 'Hello, ' + this.fullName + '!';
        }
      }
    });
  </script>
</body>
</html>

这段代码创建了一个简单的Vue应用，其中包含两个文本输入框和一个按钮。用户可以输入他们的名字，点击按钮后，会显示一个欢迎消息。这里使用了Vue的v-model指令来实现数据的双向绑定，计算属性fullName来根据firstName和lastName动态计算全名，以及方法greet来更新greeting数据属性。

前端随笔：HTML/CSS/JavaScript和Vue

评论已关闭

推荐阅读