如何在Vue.js中实现发布文本时动态新增div？技术求助

你的核心问题是没有用v-for来循环渲染动态生成的帖子，而且数据处理上也存在小bug，我来一步步帮你修正：

1. 为什么必须用v-for？ #

你现在的.postSender是静态渲染的单个元素，不管你往placeText数组里添加多少内容，页面只会显示这一个固定容器。要实现每次发新帖就生成一个新的div，必须用v-for遍历placeText数组，为每个帖子生成对应的.postSender结构。

2. 数据处理的小问题 #

你定义的placeText是对象数组（每个元素是{post: ''}），但sendPost方法里直接push(this.newPost)——这会把字符串直接塞进数组，导致数组里混合了对象和字符串，后续渲染{{ placeText.post }}会取不到正确的值。

修正后的完整代码 #

模板部分（已修复） #

.wrapper
  .msgSender
    .msgSenderTop
      img.avatar(src='https://www.w3schools.com/howto/img_avatar.png')
    form(@submit.prevent="sendPost") <!-- 改用submit事件，支持回车提交，阻止默认刷新 -->
      input#fname(type='text', v-model="newPost" placeholder="Whats on your mind?")
      input.submit(type='submit', value='Submit')
  <!-- 用v-for遍历帖子数组，生成每个帖子容器 -->
  .postSender(v-for="(post, index) in placeText" :key="index")
    .postSenderTop <!-- 修复了你拼写错误的类名：postSednerTop → postSenderTop -->
      img.avatar(src='https://www.w3schools.com/howto/img_avatar.png')
      .infos
        h3 Your name
        p {{ new Date().toLocaleString() }} <!-- 生成简单的本地时间戳 -->
      hr
    .postSenderBody
      .msg
        p {{ post.post }} <!-- 读取每个帖子对象的post属性 -->

脚本部分（已修复） #

export default {
  name: "Home",
  data() {
    return {
      placeText: [], // 初始化为空数组即可，不需要默认空对象
      newPost: ''
    }
  },
  methods: {
    sendPost() {
      if (!this.newPost.trim()) return; // 避免发送空内容
      // 推送和数组结构一致的对象，保证渲染正常
      this.placeText.push({ post: this.newPost });
      this.newPost = '';
    }
  }
}

额外优化说明 #

• :key="index"是v-for的必填项，帮助Vue跟踪每个元素的身份，提升渲染性能（如果以后有帖子ID，用ID作为key会更稳妥）。
• 把@click="sendPost"改成@submit.prevent="sendPost"，既支持点击提交，也支持回车提交，更符合用户操作习惯，prevent用来阻止表单默认的页面刷新行为。
• 修正了模板里的类名拼写错误，避免样式无法正常生效。

这样修改后，每次提交内容都会生成一个新的.postSender容器，完美实现你想要的信息流效果啦！

内容的提问来源于stack exchange，提问作者Dave