<!DOCTYPE html>
<html>
<head>
<title>Vue Bootstrap Example</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Include Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app" class="container mt-5">
<h1 class="text-center">Vue Bootstrap Example</h1>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Enter your name" v-model="name">
<div class="input-group-append">
<button class="btn btn-primary" @click="greet">Greet</button>
</div>
</div>
<p v-if="message" class="lead">{{ message }}</p>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
message: ''
},
methods: {
greet() {
this.message = `Hello, ${this.name}!`;
}
}
});
</script>
</body>
</html>row 和 col) 来布局页面，并且使用了 input-group 组件来创建一个输入框和按钮的组合。#app 元素上创建了一个 Vue 实例，绑定了 name 和 message 数据属性，并定义了一个 greet 方法，当点击按钮时会更新 message 属性并在页面上显示问候语。上一篇：vue启动
下一篇：vue watch深度监听
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站