前端随笔：HTML/CSS/JavaScript和Vue
以下是一个简单的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数据属性。
评论已关闭