104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
|
||
|
|
<view class="header">{{ post.title }}</view>
|
||
|
|
<view class="content">{{ post.content }}</view>
|
||
|
|
<view class="comments">
|
||
|
|
<view v-for="comment in comments" :key="comment.id" class="comment">
|
||
|
|
<view class="username">{{ comment.username }}</view>
|
||
|
|
<view class="text">{{ comment.text }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="add-comment">
|
||
|
|
<input v-model="newComment" placeholder="发表评论" />
|
||
|
|
<button @click="addComment">发表</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
reactive,ref
|
||
|
|
} from 'vue';
|
||
|
|
|
||
|
|
|
||
|
|
const post = ref({
|
||
|
|
title: "这是一个讨论帖子",
|
||
|
|
content: "这是帖子的内容，大家可以在评论区讨论。",
|
||
|
|
} )
|
||
|
|
const comments = ref([
|
||
|
|
{ id: 1, username: "Alice", text: "非常好的帖子！" },
|
||
|
|
{ id: 2, username: "Bob", text: "同意楼上的观点！" },
|
||
|
|
])
|
||
|
|
const newComment = ref("")
|
||
|
|
|
||
|
|
|
||
|
|
const addComment = () => {
|
||
|
|
const newId = comments.value.length + 1;
|
||
|
|
comments.value.push({
|
||
|
|
id: newId,
|
||
|
|
username: "匿名用户",
|
||
|
|
text: this.newComment,
|
||
|
|
});
|
||
|
|
newComment.value = "";
|
||
|
|
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
margin-top: 20px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comments {
|
||
|
|
margin-top: 20px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.username {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-comment {
|
||
|
|
margin-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
flex-grow: 1;
|
||
|
|
margin-right: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
padding: 10px;
|
||
|
|
background-color: #007aff;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|